Skip to content

Commit 5d85020

Browse files
mgnslndhmgnslndh
committed
Samples for new styles for PopupBox, Separator, and ListBox
1 parent b0af342 commit 5d85020

File tree

1 file changed

+85
-6
lines changed

1 file changed

+85
-6
lines changed

‎MainDemo.Wpf/Cards.xaml

Lines changed: 85 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
77
mc:Ignorable="d"
8-
d:DesignHeight="300" d:DesignWidth="300">
8+
d:DesignHeight="400" d:DesignWidth="1200">
99
<UserControl.Resources>
1010
<ResourceDictionary>
1111
<ResourceDictionary.MergedDictionaries>
1212
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
13+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
14+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
1315
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
1416
</ResourceDictionary.MergedDictionaries>
1517
</ResourceDictionary>
1618
</UserControl.Resources>
17-
<WrapPanel Margin="0 0 8 8" ItemWidth="200">
18-
<materialDesign:Card Margin="4 4 0 0">
19+
<WrapPanel Margin="0 0 8 8">
20+
<materialDesign:Card Margin="4 4 0 0" Width="200">
1921
<Grid>
2022
<Grid.RowDefinitions>
2123
<RowDefinition Height="140" />
@@ -41,6 +43,74 @@
4143
materialDesign:RippleAssist.IsCentered="True">
4244
<materialDesign:PackIcon Kind="Heart" />
4345
</Button>
46+
<materialDesign:PopupBox Style="{StaticResource MaterialDesignToolPopupBox}" Padding="2 0 2 0">
47+
<StackPanel>
48+
<Button Content="More"/>
49+
<Button Content="Options"/>
50+
</StackPanel>
51+
</materialDesign:PopupBox>
52+
</StackPanel>
53+
</Grid>
54+
</materialDesign:Card>
55+
56+
<materialDesign:Card Margin="4 4 0 0" Width="220">
57+
<Grid>
58+
<Grid.RowDefinitions>
59+
<RowDefinition Height="140" />
60+
<RowDefinition Height="*" />
61+
<RowDefinition Height="Auto" />
62+
<RowDefinition Height="Auto" />
63+
<RowDefinition Height="Auto" />
64+
<RowDefinition Height="Auto" />
65+
</Grid.RowDefinitions>
66+
<Image Source="Resources/Contact.png" Height="140" Stretch="UniformToFill"/>
67+
<Button Grid.Row="0" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
68+
HorizontalAlignment="Right" VerticalAlignment="Bottom"
69+
Margin="0 0 16 -20">
70+
<materialDesign:PackIcon Kind="ShareVariant" />
71+
</Button>
72+
<StackPanel Grid.Row="1" Margin="8 24 8 4" >
73+
<TextBlock Style="{StaticResource MaterialDesignSubheadingTextBlock}" Margin="0">E.T. the Extra-Terrestrial</TextBlock>
74+
<Viewbox Margin="0 4 0 8" Height="16" HorizontalAlignment="Left">
75+
<materialDesign:RatingBar Value="3" Orientation="Horizontal" Foreground="Gold" Margin="0" />
76+
</Viewbox>
77+
<TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" VerticalAlignment="Center">After a gentle alien becomes stranded on Earth, the being is discovered and befriended by a young boy named Elliott.</TextBlock>
78+
</StackPanel>
79+
<Separator Grid.Row="2" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0 8 0"/>
80+
<TextBlock Grid.Row="3" Margin="8 4 8 4" Style="{StaticResource MaterialDesignBody2TextBlock}">Tonight's availability</TextBlock>
81+
<Grid Grid.Row="4">
82+
<Grid.ColumnDefinitions>
83+
<ColumnDefinition Width="Auto"/>
84+
<ColumnDefinition/>
85+
</Grid.ColumnDefinitions>
86+
<materialDesign:PackIcon Grid.Column="0" Kind="Clock" VerticalAlignment="Center" Margin="8 4 4 4"/>
87+
<ListBox Grid.Column="1" Style="{StaticResource MaterialDesignToolToggleFlatListBox}" SelectedIndex="0" Margin="4 8 8 4">
88+
<ListBox.Resources>
89+
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource MaterialDesignToolToggleListBoxItem}">
90+
<Setter Property="Padding" Value="4 6 4 6" />
91+
</Style>
92+
</ListBox.Resources>
93+
<ListBox.ToolTip>
94+
<StackPanel>
95+
<TextBlock Text="MaterialDesignFlatToggleListBox" />
96+
<TextBlock Text="Exclusive selection" />
97+
<TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" />
98+
</StackPanel>
99+
</ListBox.ToolTip>
100+
<ListBoxItem>
101+
<TextBlock Text="18:00"/>
102+
</ListBoxItem>
103+
<ListBoxItem>
104+
<TextBlock Text="19:00"/>
105+
</ListBoxItem>
106+
<ListBoxItem>
107+
<TextBlock Text="22:00"/>
108+
</ListBoxItem>
109+
</ListBox>
110+
</Grid>
111+
112+
<StackPanel Grid.Row="5">
113+
<Button Style="{StaticResource MaterialDesignFlatButton}" HorizontalAlignment="Left" Margin="8 4 8 8">RESERVE</Button>
44114
</StackPanel>
45115
</Grid>
46116
</materialDesign:Card>
@@ -55,24 +125,32 @@
55125
<RowDefinition Height="Auto" />
56126
</Grid.RowDefinitions>
57127
<TextBlock Grid.Row="0" Margin="16 16 16 4" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Call Jennifer</TextBlock>
58-
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignDarkSeparator}"/>
59-
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource MaterialDesignBody1TextBlock}">March 19, 2016</TextBlock>
128+
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}"/>
129+
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource MaterialDesignBody2TextBlock}">March 19, 2016</TextBlock>
60130
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="16 0 16 8" HorizontalAlignment="Right">
61131
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundButton}" Width="30" Padding="2 0 2 0"
62132
materialDesign:RippleAssist.IsCentered="True">
63133
<materialDesign:PackIcon Kind="Phone" />
64134
</Button>
135+
<materialDesign:PopupBox HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundPopupBox}" Padding="2 0 2 0">
136+
<StackPanel>
137+
<Button Content="More"/>
138+
<Button Content="Options"/>
139+
</StackPanel>
140+
</materialDesign:PopupBox>
65141
</StackPanel>
66142
</Grid>
67143
</materialDesign:Card>
68144
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueLightBrush}"
69145
Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
146+
Width="200"
70147
Padding="8">
71148
<TextBlock FontSize="16">Boring Text</TextBlock>
72149
</materialDesign:Card>
73150
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
74151
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
75-
>
152+
Width="200"
153+
Padding="8">
76154
<StackPanel>
77155
<TextBlock Margin="16 16 12 8" FontSize="16">Notes</TextBlock>
78156
<CheckBox Margin="16 4 16 0" Style="{StaticResource MaterialDesignUserForegroundCheckBox}">Do something good</CheckBox>
@@ -89,6 +167,7 @@
89167
</materialDesign:Card>
90168
<materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
91169
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
170+
Width="200"
92171
Padding="8" UniformCornerRadius="6">
93172
<TextBlock TextWrapping="Wrap">You can adjust the corner radius</TextBlock>
94173
</materialDesign:Card>

0 commit comments

Comments
 (0)