使用Material Design（二）

<materialDesign:Card Padding="32" Margin="16">
            <WrapPanel>
                <TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock>
                <Button Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignRaisedLightButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignRaisedDarkButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignRaisedAccentButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatAccentButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatAccentBgButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatLightBgButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatMidBgButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFlatDarkBgButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignOutlinedButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignToolButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignToolForegroundButton}" Content="Click"/>

                <Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionMiniLightButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionMiniDarkButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionMiniAccentButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionLightButton}" Content="Click"/>

                <Button Style="{DynamicResource MaterialDesignFloatingActionDarkButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignFloatingActionAccentButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignIconButton}" Content="Click"/>
                <Button Style="{DynamicResource MaterialDesignIconForegroundButton}" Content="Click"/>
                <Button
  Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"
  ToolTip="MaterialDesignFloatingActionMiniLightButton">
                    <materialDesign:PackIcon    Kind="Alarm"    Height="24"    Width="24" />
                </Button>
                <Button  Style="{StaticResource MaterialDesignFloatingActionButton}"
  materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
  materialDesign:ButtonProgressAssist.Value="-1"
  materialDesign:ButtonProgressAssist.IsIndeterminate="True"
  Content="{materialDesign:PackIcon DotsHorizontal}" />
                <DatePicker
  Width="100"
  materialDesign:HintAssist.Hint="Pick Date"
  Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
                <ToggleButton
  Style="{StaticResource MaterialDesignSwitchToggleButton}"
  ToolTip="Default ToggleButton Style" />
                <ToggleButton
  Style="{StaticResource MaterialDesignFlatToggleButton}"
  ToolTip="MaterialDesignFlatToggleButton">
                    <materialDesign:PackIcon
    Kind="Paperclip"
    Height="21"
    Width="21" />
                </ToggleButton>
                <materialDesign:RatingBar
  Value="3"
  x:Name="BasicRatingBar"
    />
                <Slider
  TickFrequency="5"
  Orientation="Horizontal"
  TickPlacement="BottomRight"
  Minimum="1"
  Maximum="50"
  Value="25"
  IsSelectionRangeEnabled="True" />
                <materialDesign:PackIcon Kind="AddCircleOutline" />
                <ListBox
  IsEnabled="{Binding IsChecked, ElementName=EnableListBox}">
                    <TextBlock>
  Plain
                    </TextBlock>
                    <TextBlock>
  Old
                    </TextBlock>
                    <TextBlock>
  ListBox
                    </TextBlock>
                    <TextBlock>
  Full of junk
                    </TextBlock>
                </ListBox>
                <DataGrid
  Margin="0 8 0 0"
  ItemsSource="{Binding Items3}"
  CanUserSortColumns="True"
  CanUserAddRows="False"
  AutoGenerateColumns="False"
  materialDesign:DataGridAssist.CellPadding="13 8 8 8"
  materialDesign:DataGridAssist.ColumnHeaderPadding="8">
                    <DataGrid.Columns>
                        <DataGridCheckBoxColumn
      Binding="{Binding IsSelected}"
      ElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnStyle}"
      EditingElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnEditingStyle}">
                            <DataGridCheckBoxColumn.Header>
                                <!--padding to allow hit test to pass thru for sorting -->
                                <Border
          Background="Transparent"
          Padding="6 0 6 0"
          HorizontalAlignment="Center">
                                    <CheckBox
            HorizontalAlignment="Center"
            DataContext="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=DataContext}"
            IsChecked="{Binding IsAllItems3Selected}" />
                                </Border>
                            </DataGridCheckBoxColumn.Header>
                        </DataGridCheckBoxColumn>
                        <DataGridTextColumn
      Binding="{Binding Code}"
      Header="Code"
      EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />
                        <!-- if you want to use the pop up style (MaterialDesignDataGridTextColumnPopupEditingStyle), you must use MaterialDataGridTextColumn -->
                        <materialDesign:DataGridTextColumn
      Binding="{Binding Name}"
      Header="Name"
      EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />
                        <!-- set a max length to get an indicator in the editor -->
                        <materialDesign:DataGridTextColumn
      Binding="{Binding Description}"
      Header="Description"
      MaxLength="255"
      EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />
                        <materialDesign:DataGridTextColumn
      Binding="{Binding Numeric}"
      Header="Number with long header"
      Width="120"
      EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}">
                            <DataGridTextColumn.HeaderStyle>
                                <Style
          TargetType="{x:Type DataGridColumnHeader}"
          BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
                                    <Setter
            Property="HorizontalAlignment"
            Value="Right" />
                                    <Setter
            Property="ContentTemplate">
                                        <Setter.Value>
                                            <DataTemplate>
                                                <TextBlock
                  TextWrapping="Wrap"
                  Text="{Binding}"
                  TextAlignment="Right" />
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </DataGridTextColumn.HeaderStyle>
                            <DataGridTextColumn.ElementStyle>
                                <Style
          TargetType="{x:Type TextBlock}">
                                    <Setter
            Property="HorizontalAlignment"
            Value="Right" />
                                </Style>
                            </DataGridTextColumn.ElementStyle>
                        </materialDesign:DataGridTextColumn>
                        <!-- use custom combo box column to get better combos. Use ItemsSourceBinding as your binding template to be applied to each combo -->
                        <materialDesign:DataGridComboBoxColumn
      Header="Food"
      IsEditable="True"
      SelectedValueBinding="{Binding Food}"
      ItemsSourceBinding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.Foods}">
                            <!--Setting the editing element style allows access to all of the combo box's properties
                          <materialDesign:MaterialDataGridComboBoxColumn.EditingElementStyle>
                              <Style TargetType="ComboBox" BasedOn="{StaticResource {ComponentResourceKey TypeInTargetAssembly={x:Type ComboBox}, ResourceId=MaterialDataGridComboBoxColumnEditingStyle}}" >
                                  <Setter Property="IsEditable" Value="True" />
                              </Style>
                          </materialDesign:MaterialDataGridComboBoxColumn.EditingElementStyle>
                          -->
                        </materialDesign:DataGridComboBoxColumn>
                    </DataGrid.Columns>
                </DataGrid>
            </WrapPanel>

        </materialDesign:Card>