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 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" />
Step-4 : Now open the "MainWindow.xaml" and implement the material design themes
Step-5: Now add the Material controls like below.
        Width="400" Height="340"
      Padding="19" Margin="0 20 0 0">
          Margin="16 16 12 8"
        Add Employee Information
          Style="{StaticResource MaterialDesignLightSeparator}" Background="LightGray" />
                    <StackPanel Margin="0 20 0 0">
      Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
      IsEditable="True" Margin="0 20 0 0"
      Style="{StaticResource MaterialDesignFloatingHintComboBox}">
                                Software Engineer
      materialDesign:HintAssist.Hint="Phone" Margin="0 15 0 0"
      Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
          Style="{StaticResource MaterialDesignLightSeparator}" />
                        <materialDesign:DialogHost CloseOnClickAway="True">
                                <Grid Margin="20">
                                    <TextBlock Text="The Information to be Saved" />
                            <Button Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}" Content="Save Information"
                   HorizontalAlignment="Left" VerticalAlignment="Center" Margin="50,0,0,0"/>
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"

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