|
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