|
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 | | - d:DesignHeight="400" d:DesignWidth="800"> |
| 11 | + d:DesignHeight="500" d:DesignWidth="800"> |
11 | 12 | <UserControl.Resources> |
12 | 13 | <ResourceDictionary> |
13 | 14 | <ResourceDictionary.MergedDictionaries> |
|
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" /> |
|
263 | 302 | ToolTip="MaterialDesignSwitchDarkToggleButton" IsChecked="True" /> |
264 | 303 | <ToggleButton Style="{StaticResource MaterialDesignSwitchAccentToggleButton}" VerticalAlignment="Center" Margin="8 0 0 0" |
265 | 304 | ToolTip="MaterialDesignSwitchAccentToggleButton" IsChecked="True" /> |
| 305 | + <ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" VerticalAlignment="Center" Margin="8 0 0 0" |
| 306 | + ToolTip="MaterialDesignSwitchToggleButton with Content and ToggleButtonAssist.OnContent"> |
| 307 | + <materialDesign:PackIcon Kind="Pin" RenderTransformOrigin=".5,.5"> |
| 308 | + <materialDesign:PackIcon.RenderTransform> |
| 309 | + <RotateTransform Angle="45" /> |
| 310 | + </materialDesign:PackIcon.RenderTransform> |
| 311 | + </materialDesign:PackIcon> |
| 312 | + <materialDesign:ToggleButtonAssist.OnContent> |
| 313 | + <materialDesign:PackIcon Kind="Pin"/> |
| 314 | + </materialDesign:ToggleButtonAssist.OnContent> |
| 315 | + </ToggleButton> |
266 | 316 | </StackPanel> |
267 | | - <StackPanel Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal"> |
| 317 | + <StackPanel Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal"> |
268 | 318 | <ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="MaterialDesignFlatToggleButton"> |
269 | 319 | <materialDesign:PackIcon Kind="Paperclip" Height="21" Width="21" /> |
270 | 320 | </ToggleButton> |
|
281 | 331 | </ToggleButton> |
282 | 332 | </StackPanel> |
283 | 333 |
|
| 334 | + <!-- the following based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons --> |
284 | 335 | <ListBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="0"> |
285 | 336 | <ListBox.ToolTip> |
286 | 337 | <StackPanel> |
|
302 | 353 | <materialDesign:PackIcon Kind="FormatAlignJustify"/> |
303 | 354 | </ListBoxItem> |
304 | 355 | </ListBox> |
305 | | - |
306 | | - <ListBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MaterialDesignToolToggleFlatListBox}" SelectedIndex="0"> |
307 | | - <ListBox.ToolTip> |
308 | | - <StackPanel> |
309 | | - <TextBlock Text="MaterialDesignToolToggleFlatListBox" /> |
310 | | - <TextBlock Text="Exclusive selection" /> |
311 | | - <TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" /> |
312 | | - </StackPanel> |
313 | | - </ListBox.ToolTip> |
314 | | - <ListBoxItem> |
315 | | - <materialDesign:PackIcon Kind="FormatAlignLeft"/> |
316 | | - </ListBoxItem> |
317 | | - <ListBoxItem> |
318 | | - <materialDesign:PackIcon Kind="FormatAlignCenter"/> |
319 | | - </ListBoxItem> |
320 | | - <ListBoxItem> |
321 | | - <materialDesign:PackIcon Kind="FormatAlignRight"/> |
322 | | - </ListBoxItem> |
323 | | - <ListBoxItem> |
324 | | - <materialDesign:PackIcon Kind="FormatAlignJustify"/> |
325 | | - </ListBoxItem> |
326 | | - </ListBox> |
327 | | - |
328 | | - <ListBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MaterialDesignToolToggleListBox}" |
329 | | - SelectionMode="Extended" |
330 | | - Margin="0 8 0 0"> |
| 356 | + <ListBox Grid.Column="1" Grid.Row="2" SelectionMode="Extended" Style="{StaticResource MaterialDesignToolToggleFlatListBox}"> |
331 | 357 | <ListBox.ToolTip> |
332 | 358 | <StackPanel> |
333 | 359 | <TextBlock Text="MaterialDesignToolToggleListBox" /> |
|
0 commit comments