WPF Application With Google's Material Design

This article shows you how to create a WPF application with Google’s Material Design.

WPF applications are good but they sometimes have poor and simple controls and not-so-attractive UIs. Well, it might reduce your application’s value in front of your potential clients. So today, I decided to write this article in order to help developers create an application with an attractive UI. Okay, we will start from the simplest things.
  1. To start our simple application we need to install Visual Studio 2017 and make a new WPF application.

    WPF Application With Google's Material Design
  1. Add Material Design Themes via Nuget Packages manager after your app was created successfully. You can do that by right clicking into References folder and selecting manager Nuget packages, entering “Material Design Themes” into the search box and installing the library (could get version 2.5.0.xx)

    WPF Application With Google's Material Design
  1. If you see 2 dlls were added into your references folder like the image below, you have completed 50% your journey towards an interesting application with an attractive UI.

    WPF Application With Google's Material Design

  2. Add some lines of code under <ResourceDictionary> tag for setting up the default template into App.xaml

    1. // Copy codes for setup template  
    2. <ResourceDictionary.MergedDictionaries>  
    3.    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />  
    4.    <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />  
    5.    <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.BlueGrey.xaml" />  
    6. </ResourceDictionary.MergedDictionaries>  
    7. // Copy codes for setup template -- end  
  1. Back your app and open MainWindow.xaml to insert some new material controls.

  1. // Setting namespace  
  2. xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"  
  3. // End – setting namespace  
  4.   
  5. // Header style custom  
  6.   
  7.   
  8. <Style x:Key="headerStyle">  
  9.     <Setter Property="TextBlock.TextWrapping" Value="Wrap" />  
  10.     <Setter Property="TextBlock.TextAlignment" Value="Center" />  
  11.     <Setter Property="TextBlock.FontWeight" Value="Bold" />  
  12.     <Setter Property="TextBlock.FontSize" Value="27" />  
  13.     <Setter Property="TextBlock.FontFamily" Value="Microsoft YaHei UI" />  
  14.     <Setter Property="TextBlock.Foreground" Value="#666666" />  
  15. </Style>  
  16.   
  17. // End – header style custom  
  18.   
  19. // Main controls  
  20. <TextBlock Text="Demo Material Aplication" Style="{StaticResource headerStyle}" />  
  21.    <TextBox Name="txtUserName" FontSize="24" HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFloatingHintTextBox}" MaxLength="28" materialDesign:HintAssist.Hint="Enter your username" />  
  22.    <TextBox Name="txtYourPassword" FontSize="24" HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFloatingHintTextBox}" MaxLength="28" materialDesign:HintAssist.Hint="Enter your password" />  
  23. <Button Margin="0 20" Style="{StaticResource MaterialDesignRaisedLightButton}">  
  24. LOGIN INTO SYSTEM  
  25. </Button>  
  26. // End - Main controls  
  1. Save everything that you did and build your application now, you will be surprised with the new UI of your demo.

    WPF Application With Google's Material Design
To get more information about the Material design and study a lot of controls included in this library, please go to this link.
 
I have included my demo application just in case you need to download it.
 
Contact me for further discussion on the latest techniques.
 
Hope you will enjoy it. Good luck.