Skip to content

Commit 1ce3269

Browse files
MichelMichelsMichelMichels
authored
Uniform style in demo app pages (#2948)
* Uniform style for Buttons page * Uniform style for Cards page * Fixed DocumentationLinkButton TextBlock not centered * Unifrom style for Chips page * Uniform style for ColorTool page * Uniform style for ColorZones page * Uniform style for ComboBoxes page * Uniform style for DataGrids page * PageTitleTextBlock style added + uniform style for Dialogs page * XAML styled with XAMLStyler * Fixed title styles, 'Colour' -> 'Color' * Uniform style added for Drawers page * Uniform style for elevation added * Uniform style for Expander page * Uniform style for Fields page * Uniform style for Fields line up style * Uniform style for GroupBox page, Page titles all made singular * Singular titles and capitalized page section titles * Uniform style for GroupBox page * Uniform style for Icon page * Uniform style for List page * Uniform style for Menus and Toolbars page * Uniform style for NavigationRail page * Uniform style for Palette page * Uniform style for Pickers page added * Title added to Progress indicators page * Title added to Progress indicators page * Uniform style for RatingBar page * Uniform style for Sliders page * Only title added for Snackbar page * Uniform style for Tabs page * Uniform style for Toggles page * Title added for Transitions page * Trees page update
1 parent 7e27452 commit 1ce3269

33 files changed

+4428
-4340
lines changed

‎MainDemo.Wpf/App.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,20 @@
129129
<Setter Property="VerticalContentAlignment" Value="Bottom" />
130130
<Setter Property="materialDesignDemo:XamlDisplayEx.ButtonDock" Value="Right" />
131131
</Style>
132+
133+
<Style TargetType="TextBlock" BasedOn="{StaticResource MaterialDesignHeadline5TextBlock}" x:Key="PageTitleTextBlock">
134+
<Setter Property="Margin" Value="0 0 0 24"/>
135+
</Style>
136+
137+
<Style TargetType="TextBlock" BasedOn="{StaticResource MaterialDesignHeadline6TextBlock}" x:Key="PageSectionTitleTextBlock">
138+
<Setter Property="Margin" Value="0 0 0 16"/>
139+
</Style>
140+
141+
<Style TargetType="Rectangle" x:Key="PageSectionSeparator">
142+
<Setter Property="Margin" Value="0,24" />
143+
<Setter Property="Height" Value="1" />
144+
<Setter Property="Fill" Value="{DynamicResource MaterialDesignDivider}" />
145+
</Style>
132146
</ResourceDictionary>
133147
</Application.Resources>
134148
</Application>

‎MainDemo.Wpf/Buttons.xaml

Lines changed: 144 additions & 160 deletions
Large diffs are not rendered by default.

‎MainDemo.Wpf/Cards.xaml

Lines changed: 434 additions & 542 deletions
Large diffs are not rendered by default.

‎MainDemo.Wpf/Chips.xaml

Lines changed: 38 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,52 +8,34 @@
88
d:DesignHeight="800"
99
d:DesignWidth="1000"
1010
mc:Ignorable="d">
11+
<StackPanel>
12+
<TextBlock Style="{StaticResource PageTitleTextBlock}" Text="Chip" />
13+
14+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Action" />
1115

12-
<UserControl.Resources>
13-
<Style x:Key="ChipsHeadline"
14-
TargetType="TextBlock"
15-
BasedOn="{StaticResource MaterialDesignHeadline5TextBlock}">
16-
<Setter Property="Margin" Value="0,16,0,16" />
17-
</Style>
18-
</UserControl.Resources>
19-
20-
<Grid VerticalAlignment="Top">
21-
<Grid.RowDefinitions>
22-
<RowDefinition Height="Auto" />
23-
<RowDefinition Height="Auto" />
24-
<RowDefinition Height="Auto" />
25-
<RowDefinition Height="Auto" />
26-
<RowDefinition Height="Auto" />
27-
<RowDefinition Height="Auto" />
28-
</Grid.RowDefinitions>
29-
30-
<TextBlock Margin="0,0,0,16"
31-
Style="{StaticResource ChipsHeadline}"
32-
Text="Action Chips" />
33-
34-
<StackPanel Grid.Row="1">
16+
<StackPanel>
3517
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
36-
<smtx:XamlDisplay Margin="0,0,6,4" UniqueKey="chips_1">
18+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_1">
3719
<materialDesign:Chip Content="James Willock">
3820
<materialDesign:Chip.Icon>
3921
<Image Source="Resources/ProfilePic.jpg" />
4022
</materialDesign:Chip.Icon>
4123
</materialDesign:Chip>
4224
</smtx:XamlDisplay>
4325

44-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_2">
26+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_2">
4527
<materialDesign:Chip Content="Example Chip" />
4628
</smtx:XamlDisplay>
4729

48-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_3">
30+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_3">
4931
<materialDesign:Chip Content="ANZ Bank" Icon="A" />
5032
</smtx:XamlDisplay>
5133

52-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_4">
34+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_4">
5335
<materialDesign:Chip Content="ZNA Inc" Icon="Z" />
5436
</smtx:XamlDisplay>
5537

56-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_5">
38+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_5">
5739
<materialDesign:Chip Content="Twitter"
5840
IconBackground="{DynamicResource PrimaryHueDarkBrush}"
5941
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}">
@@ -65,7 +47,7 @@
6547
</WrapPanel>
6648

6749
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
68-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_6">
50+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_6">
6951
<materialDesign:Chip Click="ButtonsDemoChip_OnClick"
7052
Content="James Willock"
7153
DeleteClick="ButtonsDemoChip_OnDeleteClick"
@@ -78,19 +60,19 @@
7860
</materialDesign:Chip>
7961
</smtx:XamlDisplay>
8062

81-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_7">
63+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_7">
8264
<materialDesign:Chip Content="Example Chip"
8365
IsDeletable="True"
8466
ToolTip="This is an example chip" />
8567
</smtx:XamlDisplay>
8668

87-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_8">
69+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_8">
8870
<materialDesign:Chip Content="ANZ Bank"
8971
Icon="A"
9072
IsDeletable="True" />
9173
</smtx:XamlDisplay>
9274

93-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_9">
75+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_9">
9476
<materialDesign:Chip Content="ZNA Inc"
9577
Icon="Z"
9678
IconBackground="{DynamicResource PrimaryHueLightBrush}"
@@ -100,31 +82,31 @@
10082
</WrapPanel>
10183

10284
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
103-
<smtx:XamlDisplay Margin="0,0,6,4" UniqueKey="chips_34">
85+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_34">
10486
<materialDesign:Chip Content="James Willock" Style="{StaticResource MaterialDesignOutlineChip}">
10587
<materialDesign:Chip.Icon>
10688
<Image Source="Resources/ProfilePic.jpg" />
10789
</materialDesign:Chip.Icon>
10890
</materialDesign:Chip>
10991
</smtx:XamlDisplay>
11092

111-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_35">
93+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_35">
11294
<materialDesign:Chip Content="Example Chip" Style="{StaticResource MaterialDesignOutlineChip}" />
11395
</smtx:XamlDisplay>
11496

115-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_36">
97+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_36">
11698
<materialDesign:Chip Content="ANZ Bank"
11799
Icon="A"
118100
Style="{StaticResource MaterialDesignOutlineChip}" />
119101
</smtx:XamlDisplay>
120102

121-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_37">
103+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_37">
122104
<materialDesign:Chip Content="ZNA Inc"
123105
Icon="Z"
124106
Style="{StaticResource MaterialDesignOutlineChip}" />
125107
</smtx:XamlDisplay>
126108

127-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_38">
109+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_38">
128110
<materialDesign:Chip Content="Twitter"
129111
IconBackground="{DynamicResource PrimaryHueDarkBrush}"
130112
IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"
@@ -137,46 +119,42 @@
137119
</WrapPanel>
138120
</StackPanel>
139121

140-
<StackPanel Grid.Row="2">
141-
<Rectangle Height="1"
142-
Margin="0,24,0,0"
143-
Fill="{DynamicResource MaterialDesignDivider}" />
144-
<TextBlock Style="{StaticResource ChipsHeadline}" Text="Filter Chips" />
145-
</StackPanel>
122+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
123+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Filter" />
146124

147-
<StackPanel Grid.Row="3">
125+
<StackPanel>
148126
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
149-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_10">
127+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_10">
150128
<CheckBox Content="CheckBox"
151129
IsChecked="True"
152130
Style="{StaticResource MaterialDesignFilterChipCheckBox}" />
153131
</smtx:XamlDisplay>
154132

155-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_11">
133+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_11">
156134
<CheckBox Content="Primary"
157135
IsChecked="True"
158136
Style="{StaticResource MaterialDesignFilterChipPrimaryCheckBox}" />
159137
</smtx:XamlDisplay>
160138

161-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_12">
139+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_12">
162140
<CheckBox IsChecked="True" Style="{StaticResource MaterialDesignFilterChipSecondaryCheckBox}">Secondary</CheckBox>
163141
</smtx:XamlDisplay>
164142
</WrapPanel>
165143

166144
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
167-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_13">
145+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_13">
168146
<CheckBox Content="Outline"
169147
IsChecked="True"
170148
Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}" />
171149
</smtx:XamlDisplay>
172150

173-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_14">
151+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_14">
174152
<CheckBox Content="Primary Outline"
175153
IsChecked="True"
176154
Style="{StaticResource MaterialDesignFilterChipPrimaryOutlineCheckBox}" />
177155
</smtx:XamlDisplay>
178156

179-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_15">
157+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_15">
180158
<CheckBox Content="Secondary Outline"
181159
IsChecked="True"
182160
Style="{StaticResource MaterialDesignFilterChipSecondaryOutlineCheckBox}" />
@@ -254,50 +232,46 @@
254232
</WrapPanel>
255233
</StackPanel>
256234

257-
<StackPanel Grid.Row="4">
258-
<Rectangle Height="1"
259-
Margin="0,24,0,0"
260-
Fill="{DynamicResource MaterialDesignDivider}" />
261-
<TextBlock Style="{StaticResource ChipsHeadline}" Text="Choice Chips" />
262-
</StackPanel>
235+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
236+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Choice" />
263237

264-
<StackPanel Grid.Row="5">
238+
<StackPanel>
265239
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
266-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_22">
240+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_22">
267241
<RadioButton Content="RadioButton"
268242
GroupName="GroupChoiceChip"
269243
Style="{StaticResource MaterialDesignChoiceChipRadioButton}" />
270244
</smtx:XamlDisplay>
271245

272-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_23">
246+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_23">
273247
<RadioButton Content="Primary"
274248
GroupName="GroupChoiceChip"
275249
IsChecked="True"
276250
Style="{StaticResource MaterialDesignChoiceChipPrimaryRadioButton}" />
277251
</smtx:XamlDisplay>
278252

279-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_24">
253+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_24">
280254
<RadioButton Content="Secondary"
281255
GroupName="GroupChoiceChip"
282256
Style="{StaticResource MaterialDesignChoiceChipSecondaryRadioButton}" />
283257
</smtx:XamlDisplay>
284258
</WrapPanel>
285259

286260
<WrapPanel smtx:XamlDisplay.Ignore="This" Orientation="Horizontal">
287-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_25">
261+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_25">
288262
<RadioButton Content="Outline"
289263
GroupName="GroupChoiceChipOutline"
290264
Style="{StaticResource MaterialDesignChoiceChipOutlineRadioButton}" />
291265
</smtx:XamlDisplay>
292266

293-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_26">
267+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_26">
294268
<RadioButton Content="Primary Outline"
295269
GroupName="GroupChoiceChipOutline"
296270
IsChecked="True"
297271
Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}" />
298272
</smtx:XamlDisplay>
299273

300-
<smtx:XamlDisplay Margin="0,0,4,4" UniqueKey="chips_27">
274+
<smtx:XamlDisplay Margin="0,0,8,8" UniqueKey="chips_27">
301275
<RadioButton Content="Secondary Outline"
302276
GroupName="GroupChoiceChipOutline"
303277
Style="{StaticResource MaterialDesignChoiceChipSecondaryOutlineRadioButton}" />
@@ -374,5 +348,5 @@
374348
</materialDesign:Card>
375349
</WrapPanel>
376350
</StackPanel>
377-
</Grid>
351+
</StackPanel>
378352
</UserControl>

‎MainDemo.Wpf/ColorTool.xaml

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,12 @@
115115
</DataTemplate>
116116
</ResourceDictionary>
117117
</UserControl.Resources>
118-
119118
<DockPanel>
120-
<local:ThemeSettings Margin="8" DockPanel.Dock="Top" />
119+
<TextBlock DockPanel.Dock="Top"
120+
Style="{StaticResource PageTitleTextBlock}"
121+
Text="ColorTool" />
122+
123+
<local:ThemeSettings Margin="0,0,0,8" DockPanel.Dock="Top" />
121124

122125
<DockPanel>
123126
<!-- Selection controls -->
@@ -456,14 +459,12 @@
456459
</Border>
457460

458461
<!-- Current scheme label -->
459-
<Border BorderThickness="1,0,1,0" DockPanel.Dock="Bottom">
460-
<TextBlock Margin="16"
461-
Style="{StaticResource MaterialDesignBody1TextBlock}"
462-
Text="CURRENT SCHEME" />
463-
</Border>
462+
<TextBlock DockPanel.Dock="Bottom"
463+
Style="{StaticResource PageTitleTextBlock}"
464+
Text="Current scheme" />
464465

465466
<!-- Color picker section -->
466-
<DockPanel Margin="16">
467+
<DockPanel Margin="0,0,0,16">
467468
<UniformGrid Columns="1" DockPanel.Dock="Right">
468469
<RadioButton x:Name="MdPaletteButton"
469470
Margin="4"
@@ -486,8 +487,7 @@
486487
</Grid.ColumnDefinitions>
487488

488489
<DockPanel>
489-
<TextBox Margin="2,0,10,2"
490-
materialDesign:HintAssist.Hint="Color HEX value"
490+
<TextBox materialDesign:HintAssist.Hint="Color HEX value"
491491
DockPanel.Dock="Top"
492492
Style="{StaticResource MaterialDesignFilledTextBox}"
493493
Text="{Binding Color, ElementName=ColorPicker, UpdateSourceTrigger=PropertyChanged}" />

‎MainDemo.Wpf/ColorZones.xaml

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
66
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
77
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
8-
d:DesignHeight="800"
9-
d:DesignWidth="600"
8+
d:DesignHeight="1080"
9+
d:DesignWidth="1920"
1010
mc:Ignorable="d">
1111
<UserControl.Resources>
1212
<ResourceDictionary>
@@ -18,15 +18,14 @@
1818
</ResourceDictionary>
1919
</UserControl.Resources>
2020
<StackPanel>
21-
<TextBlock Style="{StaticResource MaterialDesignHeadline5TextBlock}" Text="Colour Zones" />
21+
<TextBlock Style="{StaticResource PageTitleTextBlock}" Text="ColorZone" />
2222

2323
<TextBlock MaxWidth="800"
24-
Margin="0,16,0,0"
2524
HorizontalAlignment="Left"
2625
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
27-
Text="The ColorZone control allows you to easily define striking blocks of colour to give your application extra clarity and style, whilst still remaining within the bounds of your Material Design palette."
26+
Text="The ColorZone control allows you to easily define striking blocks of color to give your application extra clarity and style, whilst still remaining within the bounds of your Material Design palette."
2827
TextWrapping="Wrap" />
29-
<TextBlock Margin="0,16,0,2"
28+
<TextBlock Margin="0,16,0,8"
3029
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
3130
Text="Invert the basic paper/body colours." />
3231

@@ -52,7 +51,7 @@
5251
</DockPanel>
5352
</materialDesign:ColorZone>
5453
</smtx:XamlDisplay>
55-
<TextBlock Margin="0,16,0,2"
54+
<TextBlock Margin="0,16,0,8"
5655
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
5756
Text="Use primary light background and foreground colours." />
5857

@@ -67,7 +66,7 @@
6766
</StackPanel>
6867
</materialDesign:ColorZone>
6968
</smtx:XamlDisplay>
70-
<TextBlock Margin="0,16,0,2"
69+
<TextBlock Margin="0,16,0,8"
7170
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
7271
Text="Use primary mid colours, and nest colour zones!" />
7372

@@ -134,7 +133,7 @@
134133
</DockPanel>
135134
</materialDesign:ColorZone>
136135
</smtx:XamlDisplay>
137-
<TextBlock Margin="0,16,0,2"
136+
<TextBlock Margin="0,16,0,8"
138137
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
139138
Text="Add in a corner radius and shadow." />
140139

@@ -153,7 +152,7 @@
153152
</StackPanel>
154153
</materialDesign:ColorZone>
155154
</smtx:XamlDisplay>
156-
<TextBlock Margin="0,16,0,2"
155+
<TextBlock Margin="0,16,0,8"
157156
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
158157
Text="Use secondary mid background and foreground colours." />
159158

@@ -168,7 +167,7 @@
168167
</StackPanel>
169168
</materialDesign:ColorZone>
170169
</smtx:XamlDisplay>
171-
<TextBlock Margin="0,16,0,2"
170+
<TextBlock Margin="0,16,0,8"
172171
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
173172
Text="Use custom background and foreground colours. Disabled ClipToBounds" />
174173

0 commit comments

Comments
 (0)