WPF Material Design

Before we starting the article we will first learn what is Material Design ??

Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users' experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.

In this article we are not covering the Web/Mobility part. We focus on how to implement material design in WPF application.

Step-1 : File-> New Project
Step-2 : Open the Package Manager and Search "MaterialDesign Themes" and install the package.
Step-3 : Open the "App.xaml" and add the "MaterialDesign" resource file as below.
    <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                    <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Purple.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
Step-4 : Now open the "MainWindow.xaml" and implement the material design themes
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Step-5: Now add the Material controls like below.
     <materialDesign:Card
        Width="400" Height="340"
      Padding="19" Margin="0 20 0 0">
                <StackPanel>
                    <TextBlock 
          Margin="16 16 12 8"
          FontSize="16">
        Add Employee Information
                    </TextBlock>
                      <Separator
          Style="{StaticResource MaterialDesignLightSeparator}" Background="LightGray" />
                    <StackPanel Margin="0 20 0 0">
                        <TextBox
      materialDesign:HintAssist.Hint="Name"
      Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
                        <ComboBox
      materialDesign:HintAssist.Hint="Designation" 
      IsEditable="True" Margin="0 20 0 0"
      Style="{StaticResource MaterialDesignFloatingHintComboBox}">
                            <ComboBoxItem
        IsSelected="True">
                                Software Engineer
                            </ComboBoxItem>
                            <ComboBoxItem>
                                HR
                            </ComboBoxItem>
                            <ComboBoxItem>
                                Finance
                            </ComboBoxItem>
                            <ComboBoxItem>
                                Accountant
                            </ComboBoxItem>
                        </ComboBox>
                        <TextBox
      materialDesign:HintAssist.Hint="Phone" Margin="0 15 0 0"
      Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
                        <Separator
          Style="{StaticResource MaterialDesignLightSeparator}" />
                        <materialDesign:DialogHost CloseOnClickAway="True">
                            <materialDesign:DialogHost.DialogContent>
                                <Grid Margin="20">
                                    <TextBlock Text="The Information to be Saved" />
                                </Grid>
                            </materialDesign:DialogHost.DialogContent>
    
                            <Button Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}" Content="Save Information"
                   HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0"/>
                        </materialDesign:DialogHost>
                    </StackPanel>
                </StackPanel>
            </materialDesign:Card>
Step-6: Now save all and run the application, the output should like below.

  • We take "MaterialDesign Card" with example of adding Employee Info.
  • Textbox is consider for Emp. Name and Phone , ComboBox item is designation.
  • Button is taken and when Click on the button then Confirmation message will show.
  • For confirmation box we will take "materialDesign:DialogHost"



Summary 
In this article we will cover how to add material-design in WPF.