Skip to content

Commit f6e6446

Browse files
ButchersBoyButchersBoy
committed
Merge branch 'New-Demo-2' of https://github.com/wongjiahau/MaterialDesignInXamlToolkit into wongjiahau-New-Demo-2
2 parents eb87481 + 3cbda6d commit f6e6446

18 files changed

+567
-112
lines changed

‎MainDemo.Wpf/Buttons.xaml

Lines changed: 153 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@
2626
<materialDesignConverters:BooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible" />
2727
</ResourceDictionary>
2828
</UserControl.Resources>
29-
<codeDisplayer:XamlDisplayerPanel >
30-
31-
29+
<codeDisplayer:XamlDisplayerPanel HorizontalAlignment="Center">
30+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
31+
Raised Button
32+
</TextBlock>
3233
<Button Style="{StaticResource MaterialDesignRaisedLightButton}" Width="100"
3334
ToolTip="Resource name: MaterialDesignRaisedLightButton">
3435
_LIGHT
@@ -45,6 +46,99 @@
4546
ToolTip="Resource name: MaterialDesignRaisedAccentButton">
4647
ACCENT
4748
</Button>
49+
50+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
51+
Floating Action Button
52+
</TextBlock>
53+
<Button Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"
54+
ToolTip="MaterialDesignFloatingActionMiniLightButton">
55+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
56+
</Button>
57+
<Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
58+
ToolTip="MaterialDesignFloatingActionMiniButton">
59+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
60+
</Button>
61+
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"
62+
ToolTip="MaterialDesignFloatingActionMiniDarkButton">
63+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
64+
</Button>
65+
<Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
66+
ToolTip="MaterialDesignFloatingActionMiniAccentButton">
67+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
68+
</Button>
69+
<Button Style="{StaticResource MaterialDesignFloatingActionLightButton}"
70+
ToolTip="MaterialDesignFloatingActionLightButton">
71+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
72+
</Button>
73+
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
74+
ToolTip="MaterialDesignFloatingActionButton">
75+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
76+
</Button>
77+
<Button Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
78+
ToolTip="MaterialDesignFloatingActionDarkButton">
79+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
80+
</Button>
81+
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
82+
ToolTip="MaterialDesignFloatingActionAccentButton">
83+
<materialDesign:PackIcon Kind="Alarm" Height="24" Width="24" />
84+
</Button>
85+
86+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
87+
PopupBox
88+
</TextBlock>
89+
<materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
90+
<StackPanel>
91+
<Button Content="Hello World"/>
92+
<Button Content="Nice Popup"/>
93+
<Button Content="Can't Touch This" IsEnabled="False" />
94+
<Separator/>
95+
<Button Content="Goodbye"/>
96+
</StackPanel>
97+
</materialDesign:PopupBox>
98+
<materialDesign:PopupBox StaysOpen="True">
99+
<Grid Width="300" Margin="8,8,8,8">
100+
<Grid.Resources>
101+
<Style TargetType="CheckBox" BasedOn="{StaticResource MaterialDesignCheckBox}">
102+
<Setter Property="Margin" Value="8,8,10,8"/>
103+
</Style>
104+
<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
105+
<Setter Property="materialDesign:HintAssist.IsFloating" Value="True"/>
106+
<Setter Property="Margin" Value="8,8,8,8"/>
107+
</Style>
108+
</Grid.Resources>
109+
<Grid.ColumnDefinitions>
110+
<ColumnDefinition Width="*"/>
111+
<ColumnDefinition Width="Auto"/>
112+
</Grid.ColumnDefinitions>
113+
<Grid.RowDefinitions>
114+
<RowDefinition Height="*"/>
115+
<RowDefinition Height="*"/>
116+
<RowDefinition Height="*"/>
117+
<RowDefinition Height="*"/>
118+
<RowDefinition Height="*" />
119+
</Grid.RowDefinitions>
120+
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource MaterialDesignTitleTextBlock}" Margin="8,8,8,16">OPTIONS</TextBlock>
121+
<TextBox Grid.Column="0" Grid.Row="1" materialDesign:HintAssist.Hint="Setting 1" Text="200"/>
122+
<TextBox Grid.Column="0" Grid.Row="2" materialDesign:HintAssist.Hint="Setting 2" Text="400"/>
123+
<TextBox Grid.Column="0" Grid.Row="3" materialDesign:HintAssist.Hint="Setting 3" Text="600"/>
124+
<CheckBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Bottom" />
125+
<CheckBox Grid.Column="1" Grid.Row="2" IsChecked="True" VerticalAlignment="Bottom" />
126+
<CheckBox Grid.Column="1" Grid.Row="3" VerticalAlignment="Bottom" />
127+
<ComboBox Grid.Column="0" Grid.Row="4" materialDesign:HintAssist.Hint="Setting 4" materialDesign:HintAssist.IsFloating="True"
128+
MaxDropDownHeight="200"
129+
Margin="8 8 8 8">
130+
<ComboBoxItem>25%</ComboBoxItem>
131+
<ComboBoxItem>50%</ComboBoxItem>
132+
<ComboBoxItem>75%</ComboBoxItem>
133+
<ComboBoxItem>100%</ComboBoxItem>
134+
<ComboBoxItem>150%</ComboBoxItem>
135+
<ComboBoxItem>200%</ComboBoxItem>
136+
<ComboBoxItem>250%</ComboBoxItem>
137+
<ComboBoxItem>501%</ComboBoxItem>
138+
</ComboBox>
139+
</Grid>
140+
141+
</materialDesign:PopupBox>
48142
<materialDesign:PopupBox
49143
Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
50144
PlacementMode="BottomAndAlignCentres"
@@ -73,32 +167,36 @@
73167
<Button ToolTip="Three">3</Button>
74168
</StackPanel>
75169
</materialDesign:PopupBox>
170+
171+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
172+
Badge
173+
</TextBlock>
76174
<materialDesign:Badged Badge="3">
77175
<Button>MAIL</Button>
78176
</materialDesign:Badged>
79-
80177
<materialDesign:Badged Badge="{materialDesign:PackIcon Heart}"
81178
BadgeColorZoneMode="Accent">
82179
<Button>LOVE</Button>
83180
</materialDesign:Badged>
84-
85181
<materialDesign:Badged Badge="DANGER"
86182
BadgeColorZoneMode="Dark">
87183
<Button>STATUS</Button>
88184
</materialDesign:Badged>
89-
<materialDesign:Badged
90-
x:Name="CountingBadge"
91-
BadgeColorZoneMode="PrimaryDark">
185+
<materialDesign:Badged x:Name="CountingBadge" BadgeColorZoneMode="PrimaryDark">
92186
<Button Style="{StaticResource MaterialDesignRaisedLightButton}"
93187
Click="CountingButton_OnClick">CLICK ME!</Button>
94188
</materialDesign:Badged>
95-
<Button Content="{materialDesign:PackIcon AirplaneTakeoff}"
96-
97-
ToolTip="Icon">
98-
</Button>
99189

190+
191+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
192+
Button with icon
193+
</TextBlock>
194+
<Button Content="{materialDesign:PackIcon AirplaneTakeoff}" ToolTip="Icon" />
195+
196+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
197+
Custom ripples
198+
</TextBlock>
100199
<Button Style="{StaticResource MaterialDesignRaisedAccentButton}"
101-
102200
Width="150"
103201
ToolTip="Resource name: MaterialDesignRaisedAccentButton"
104202
materialDesign:RippleAssist.Feedback="#DD000000">CUSTOM RIPPLE</Button>
@@ -107,12 +205,24 @@
107205
Width="150"
108206
ToolTip="Resource name: MaterialDesignRaisedAccentButton"
109207
materialDesign:RippleAssist.IsDisabled="True">NO RIPPLE</Button>
208+
209+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
210+
Repeat button
211+
</TextBlock>
110212
<RepeatButton Width="100"
111213
ToolTip="Resource name: MaterialDesignRaisedButton">
112214
REPEAT
113215
</RepeatButton>
216+
217+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
218+
Flat button
219+
</TextBlock>
114220
<Button Style="{StaticResource MaterialDesignFlatButton}" Click="ButtonBase_OnClick" ToolTip="MaterialDesignFlatButton">ACCEPT</Button>
115221
<Button Style="{StaticResource MaterialDesignFlatButton}" ToolTip="MaterialDesignFlatButton">CANCEL</Button>
222+
223+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
224+
Button with progress
225+
</TextBlock>
116226
<Grid Width="124">
117227
<Button Command="{Binding DismissComand}"
118228
Style="{StaticResource MaterialDesignRaisedButton}"
@@ -178,6 +288,10 @@
178288
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
179289
materialDesign:ButtonProgressAssist.Value="75"
180290
Content="{materialDesign:PackIcon DotsHorizontal}" />
291+
292+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
293+
Action toggle button
294+
</TextBlock>
181295
<ToggleButton Content="C" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True"
182296
ToolTip="MaterialDesignActionLightToggleButton"/>
183297
<ToggleButton Content="H" Style="{StaticResource MaterialDesignActionToggleButton}"
@@ -202,6 +316,10 @@
202316
<materialDesign:PackIcon Kind="EmoticonHappy" />
203317
</materialDesign:ToggleButtonAssist.OnContent>
204318
</ToggleButton>
319+
320+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
321+
Radio button
322+
</TextBlock>
205323
<RadioButton Style="{StaticResource MaterialDesignRadioButton}" VerticalAlignment="Center" Tag="True">
206324
<RadioButton.IsChecked>
207325
<Binding Path="Tag" RelativeSource="{RelativeSource Self}">
@@ -219,6 +337,10 @@
219337
IsEnabled="False">
220338
Disabled
221339
</RadioButton>
340+
341+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
342+
Checkbox
343+
</TextBlock>
222344
<CheckBox Style="{StaticResource MaterialDesignCheckBox}" VerticalAlignment="Center">
223345
Check
224346
</CheckBox>
@@ -236,6 +358,10 @@
236358
IsEnabled="False" IsChecked="True">
237359
Disabled
238360
</CheckBox>
361+
362+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
363+
Switch Toggle
364+
</TextBlock>
239365
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center"
240366
ToolTip="Default ToggleButton Style"/>
241367
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" IsEnabled="False" />
@@ -259,7 +385,9 @@
259385
</materialDesign:ToggleButtonAssist.OnContent>
260386
</ToggleButton>
261387

262-
388+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
389+
Flat toggle
390+
</TextBlock>
263391
<ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="MaterialDesignFlatToggleButton">
264392
<materialDesign:PackIcon Kind="Paperclip" Height="21" Width="21" />
265393
</ToggleButton>
@@ -274,6 +402,10 @@
274402
IsEnabled="False">
275403
<materialDesign:PackIcon Kind="Heart" Height="21" Width="21" />
276404
</ToggleButton>
405+
406+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
407+
Tool toggles
408+
</TextBlock>
277409
<ListBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="0">
278410
<ListBox.ToolTip>
279411
<StackPanel>
@@ -313,6 +445,10 @@
313445
<materialDesign:PackIcon Kind="FormatUnderline"/>
314446
</ListBoxItem>
315447
</ListBox>
448+
449+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">
450+
Rating bar
451+
</TextBlock>
316452
<materialDesign:RatingBar Value="3" x:Name="BasicRatingBar" />
317453
<TextBlock Width="100" Text="{Binding ElementName=BasicRatingBar, Path=Value, StringFormat=Rating: {0}}" VerticalAlignment="Top" />
318454
<materialDesign:RatingBar x:Name="CustomRatingBar" Max="3" Value="2" Orientation="Vertical">
@@ -330,3 +466,6 @@
330466
<TextBlock Width="100" Height="30" Text="{Binding ElementName=CustomRatingBar, Path=Value, StringFormat=Rating: {0}}" VerticalAlignment="Top" />
331467
</codeDisplayer:XamlDisplayerPanel>
332468
</UserControl>
469+
470+
471+

‎MainDemo.Wpf/Chips.xaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
mc:Ignorable="d"
1010
d:DesignHeight="300" d:DesignWidth="300">
1111
<ScrollViewer>
12-
<codeDisplayer:XamlDisplayerPanel Margin="32">
13-
<TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}">Chips</TextBlock>
12+
<codeDisplayer:XamlDisplayerPanel HorizontalAlignment="Center" Margin="32">
13+
<TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">Chips</TextBlock>
1414
<materialDesign:Chip Content="James Willock" Margin="0 0 6 4">
1515
<materialDesign:Chip.Icon>
1616
<Image Source="Resources/ProfilePic.jpg" />

‎MainDemo.Wpf/ColorZones.xaml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
mc:Ignorable="d"
99
d:DesignHeight="800" d:DesignWidth="600">
1010
<ScrollViewer>
11-
<codeDisplayer:XamlDisplayerPanel >
12-
<StackPanel Margin="16">
13-
<TextBlock FontSize="16">Colour Zones</TextBlock>
14-
<TextBlock TextWrapping="Wrap" MaxWidth="200" Margin="0 16 0 0">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.</TextBlock>
11+
<codeDisplayer:XamlDisplayerPanel HorizontalAlignment="Center" >
12+
<StackPanel Margin="16" codeDisplayer:XamlDisplayer.DisplayCode="False">
13+
<TextBlock Style="{StaticResource MaterialDesignHeadlineTextBlock}">Colour Zones</TextBlock>
14+
<TextBlock TextWrapping="Wrap" MaxWidth="800" Margin="0 16 0 0" Style="{StaticResource MaterialDesignSubheadingTextBlock}">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.</TextBlock>
1515
<TextBlock Margin="0 16 0 0" FontSize="10">Invert the basic paper/body colours.</TextBlock>
1616
</StackPanel>
1717
<materialDesign:ColorZone Mode="Inverted" Padding="16">
@@ -29,14 +29,14 @@
2929
</StackPanel>
3030
</DockPanel>
3131
</materialDesign:ColorZone>
32-
<TextBlock Margin="0 16 0 0" TextWrapping="Wrap" FontSize="10">Use primary light back and fore colours.</TextBlock>
32+
<TextBlock Margin="0 16 0 0" TextWrapping="Wrap" Style="{StaticResource MaterialDesignSubheadingTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">Use primary light back and fore colours.</TextBlock>
3333
<materialDesign:ColorZone Mode="PrimaryLight" Padding="16">
3434
<StackPanel Orientation="Horizontal">
3535
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
3636
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
3737
</StackPanel>
3838
</materialDesign:ColorZone>
39-
<TextBlock Margin="0 16 0 0" FontSize="10">Use primary mid colours, and nest colour zones!</TextBlock>
39+
<TextBlock Margin="0 16 0 0" Style="{StaticResource MaterialDesignSubheadingTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">Use primary mid colours, and nest colour zones!</TextBlock>
4040
<materialDesign:ColorZone Mode="PrimaryMid" Padding="16">
4141
<DockPanel>
4242
<ToggleButton Style="{StaticResource MaterialDesignSwitchAccentToggleButton}" VerticalAlignment="Center"
@@ -70,14 +70,14 @@
7070
</StackPanel>
7171
</DockPanel>
7272
</materialDesign:ColorZone>
73-
<TextBlock Margin="0 16 0 0" FontSize="10">Add in a corner radius and shadow.</TextBlock>
73+
<TextBlock Margin="0 16 0 0" Style="{StaticResource MaterialDesignSubheadingTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">Add in a corner radius and shadow.</TextBlock>
7474
<materialDesign:ColorZone Mode="PrimaryDark" Padding="16" CornerRadius="3" materialDesign:ShadowAssist.ShadowDepth="Depth3" Margin="2">
7575
<StackPanel Orientation="Horizontal">
7676
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
7777
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0">Material Design In XAML Toolkit</TextBlock>
7878
</StackPanel>
7979
</materialDesign:ColorZone>
80-
<TextBlock Margin="0 16 0 0" FontSize="10">Use accent back and fore colours.</TextBlock>
80+
<TextBlock Margin="0 16 0 0" Style="{StaticResource MaterialDesignSubheadingTextBlock}" codeDisplayer:XamlDisplayer.DisplayCode="False">Use accent back and fore colours.</TextBlock>
8181
<materialDesign:ColorZone Mode="Accent" Padding="16">
8282
<StackPanel Orientation="Horizontal">
8383
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />

0 commit comments

Comments
 (0)