|
6 | 6 | xmlns:system="clr-namespace:System;assembly=mscorlib" |
7 | 7 | xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" |
8 | 8 | xmlns:wpfExample="clr-namespace:MaterialDesignColors.WpfExample" |
| 9 | + xmlns:domain="clr-namespace:MaterialDesignDemo.Domain" |
9 | 10 | mc:Ignorable="d" |
10 | 11 | d:DesignHeight="500" d:DesignWidth="800"> |
11 | 12 | <UserControl.Resources> |
|
89 | 90 | </materialDesign:PopupBox> |
90 | 91 | </StackPanel> |
91 | 92 | <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom"> |
92 | | - <materialDesign:PopupBox Margin="16,0,16,0" StaysOpen="True"> |
| 93 | + <CheckBox Name="PopupEnabled">Enable Popup</CheckBox> |
| 94 | + <materialDesign:PopupBox Margin="16,0,16,0" StaysOpen="True" IsEnabled="{Binding IsChecked, ElementName=PopupEnabled}"> |
93 | 95 | <Grid Width="300" Margin="8,8,8,8"> |
94 | 96 | <Grid.Resources> |
95 | 97 | <Style TargetType="CheckBox" BasedOn="{StaticResource MaterialDesignCheckBox}"> |
|
151 | 153 | </materialDesign:PopupBox> |
152 | 154 | </StackPanel> |
153 | 155 | </Grid> |
154 | | - <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0 16 0 0"> |
155 | | - <Button Style="{StaticResource MaterialDesignRaisedLightButton}" Margin="0 0 8 0" Width="100" |
| 156 | + <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0 20 0 0"> |
| 157 | + <Button Style="{StaticResource MaterialDesignRaisedLightButton}" Margin="0 12 8 0" Width="100" |
156 | 158 | ToolTip="Resource name: MaterialDesignRaisedLightButton"> |
157 | 159 | _LIGHT |
158 | 160 | </Button> |
159 | | - <Button Style="{StaticResource MaterialDesignRaisedButton}" Margin="0 0 8 0" Width="100" |
| 161 | + <Button Style="{StaticResource MaterialDesignRaisedButton}" Margin="0 12 8 0" Width="100" |
160 | 162 | ToolTip="Resource name: MaterialDesignRaisedButton"> |
161 | 163 | _MID |
162 | 164 | </Button> |
163 | | - <Button Style="{StaticResource MaterialDesignRaisedDarkButton}" Margin="0 0 8 0" Width="100" |
| 165 | + <Button Style="{StaticResource MaterialDesignRaisedDarkButton}" Margin="0 12 8 0" Width="100" |
164 | 166 | ToolTip="Resource name: MaterialDesignRaisedLightDarkButton"> |
165 | 167 | _DARK |
166 | 168 | </Button> |
167 | | - <Button Style="{StaticResource MaterialDesignRaisedAccentButton}" Margin="0 0 8 0" Width="100" |
| 169 | + <Button Style="{StaticResource MaterialDesignRaisedAccentButton}" Margin="0 12 16 0" Width="100" |
168 | 170 | ToolTip="Resource name: MaterialDesignRaisedAccentButton"> |
169 | 171 | ACCENT |
170 | 172 | </Button> |
| 173 | + <materialDesign:Badged Margin="0 12 16 4" Badge="3"> |
| 174 | + <Button>MAIL</Button> |
| 175 | + </materialDesign:Badged> |
| 176 | + |
| 177 | + <materialDesign:Badged Margin="0 12 16 4" Badge="{materialDesign:PackIcon Heart}" |
| 178 | + BadgeColorZoneMode="Accent"> |
| 179 | + <Button>LOVE</Button> |
| 180 | + </materialDesign:Badged> |
| 181 | + |
| 182 | + <materialDesign:Badged Margin="0 12 28 4" Badge="DANGER" |
| 183 | + BadgeColorZoneMode="Dark"> |
| 184 | + <Button>STATUS</Button> |
| 185 | + </materialDesign:Badged> |
| 186 | + <materialDesign:Badged Margin="0 12 28 4" |
| 187 | + x:Name="CountingBadge" |
| 188 | + BadgeColorZoneMode="PrimaryDark"> |
| 189 | + <Button Style="{StaticResource MaterialDesignRaisedLightButton}" |
| 190 | + Click="CountingButton_OnClick">CLICK ME!</Button> |
| 191 | + </materialDesign:Badged> |
| 192 | + <Button Content="{materialDesign:PackIcon AirplaneTakeoff}" |
| 193 | + Margin="0 12 8 4" |
| 194 | + ToolTip="Icon"> |
| 195 | + </Button> |
171 | 196 | </StackPanel> |
172 | 197 | <StackPanel Grid.Row="3" Margin="0 24 0 0" Orientation="Horizontal"> |
173 | 198 | <Button Style="{StaticResource MaterialDesignRaisedAccentButton}" |
|
230 | 255 | </ToggleButton> |
231 | 256 | </StackPanel> |
232 | 257 | <StackPanel Grid.Row="1" Margin="0 16 0 0" Orientation="Horizontal"> |
233 | | - <RadioButton Style="{StaticResource MaterialDesignRadioButton}" Margin="0 0 8 8" VerticalAlignment="Center" IsChecked="True"> |
| 258 | + <RadioButton Style="{StaticResource MaterialDesignRadioButton}" Margin="0 0 8 8" VerticalAlignment="Center" Tag="True"> |
| 259 | + <RadioButton.IsChecked> |
| 260 | + <Binding Path="Tag" RelativeSource="{RelativeSource Self}"> |
| 261 | + <Binding.ValidationRules> |
| 262 | + <domain:IsCheckedValidationRule /> |
| 263 | + </Binding.ValidationRules> |
| 264 | + </Binding> |
| 265 | + </RadioButton.IsChecked> |
234 | 266 | Radio |
235 | 267 | </RadioButton> |
236 | 268 | <RadioButton Style="{StaticResource MaterialDesignRadioButton}" Margin="0 0 8 8" VerticalAlignment="Center"> |
|
243 | 275 | <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="0 0 8 8" VerticalAlignment="Center"> |
244 | 276 | Check |
245 | 277 | </CheckBox> |
246 | | - <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="0 0 8 8" VerticalAlignment="Center" IsChecked="True"> |
| 278 | + <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="0 0 8 8" VerticalAlignment="Center" Tag="True"> |
| 279 | + <CheckBox.IsChecked> |
| 280 | + <Binding Path="Tag" RelativeSource="{RelativeSource Self}"> |
| 281 | + <Binding.ValidationRules> |
| 282 | + <domain:IsCheckedValidationRule /> |
| 283 | + </Binding.ValidationRules> |
| 284 | + </Binding> |
| 285 | + </CheckBox.IsChecked> |
247 | 286 | Mate |
248 | 287 | </CheckBox> |
249 | 288 | <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="0 0 8 8" VerticalAlignment="Center" |
250 | 289 | IsEnabled="False" IsChecked="True"> |
251 | 290 | Disabled |
252 | 291 | </CheckBox> |
253 | 292 | </StackPanel> |
254 | | - <StackPanel Grid.Row="2" Margin="0 16 0 0" Orientation="Horizontal"> |
| 293 | + <StackPanel Grid.Row="2" Margin="0 16 0 0" Orientation="Horizontal"> |
255 | 294 | <ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" |
256 | 295 | ToolTip="Default ToggleButton Style"/> |
257 | 296 | <ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="8 0 0 0" IsEnabled="False" /> |
|
275 | 314 | </materialDesign:ToggleButtonAssist.OnContent> |
276 | 315 | </ToggleButton> |
277 | 316 | </StackPanel> |
278 | | - <StackPanel Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal"> |
| 317 | + <StackPanel Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal"> |
279 | 318 | <ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="MaterialDesignFlatToggleButton"> |
280 | 319 | <materialDesign:PackIcon Kind="Paperclip" Height="21" Width="21" /> |
281 | 320 | </ToggleButton> |
|
292 | 331 | </ToggleButton> |
293 | 332 | </StackPanel> |
294 | 333 |
|
| 334 | + <!-- the following based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons --> |
295 | 335 | <ListBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="0"> |
296 | 336 | <ListBox.ToolTip> |
297 | 337 | <StackPanel> |
|
313 | 353 | <materialDesign:PackIcon Kind="FormatAlignJustify"/> |
314 | 354 | </ListBoxItem> |
315 | 355 | </ListBox> |
316 | | - |
317 | | - <ListBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MaterialDesignToolToggleFlatListBox}" SelectedIndex="0"> |
318 | | - <ListBox.ToolTip> |
319 | | - <StackPanel> |
320 | | - <TextBlock Text="MaterialDesignToolToggleFlatListBox" /> |
321 | | - <TextBlock Text="Exclusive selection" /> |
322 | | - <TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" /> |
323 | | - </StackPanel> |
324 | | - </ListBox.ToolTip> |
325 | | - <ListBoxItem> |
326 | | - <materialDesign:PackIcon Kind="FormatAlignLeft"/> |
327 | | - </ListBoxItem> |
328 | | - <ListBoxItem> |
329 | | - <materialDesign:PackIcon Kind="FormatAlignCenter"/> |
330 | | - </ListBoxItem> |
331 | | - <ListBoxItem> |
332 | | - <materialDesign:PackIcon Kind="FormatAlignRight"/> |
333 | | - </ListBoxItem> |
334 | | - <ListBoxItem> |
335 | | - <materialDesign:PackIcon Kind="FormatAlignJustify"/> |
336 | | - </ListBoxItem> |
337 | | - </ListBox> |
338 | | - |
339 | | - <ListBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MaterialDesignToolToggleListBox}" |
340 | | - SelectionMode="Extended" |
341 | | - Margin="0 8 0 0"> |
| 356 | + <ListBox Grid.Column="1" Grid.Row="2" SelectionMode="Extended" Style="{StaticResource MaterialDesignToolToggleFlatListBox}"> |
342 | 357 | <ListBox.ToolTip> |
343 | 358 | <StackPanel> |
344 | 359 | <TextBlock Text="MaterialDesignToolToggleListBox" /> |
|
0 commit comments