Create Modern WPF application using Material Design in XAML

And make it look attractive!

WPF Login view using Material Design

Let us go step by step on how to create a similar Login page :

Of course nobody can deny how Material Design can give your app a nice UI, well using MaterialDesignInXaml, now we can achieve the same with WPF.

Let us go step by step on how to create a similar Login page :

First thing we need to do is to create a WPF project, call it WPFMaterialDesign and install Material Design nuget package using :

Install-Package MaterialDesignThemes -Version 2.6.0

Next thing we need to do is add MaterialDesignThemes to our 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.Purple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>

Now we are ready to start adding controls to build the Login.

Let us get rid of the window bar at the top by adding the following to our MainWindow.xaml :

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
Height="370"
Width="300"
WindowStartupLocation="CenterScreen"
ResizeMode="NoResize"
WindowStyle="None"
Background="#FF410A66"

Let us create a Grid to serve as layout for the other controls, StackPanel and a border :

<Grid>
<StackPanel >
<Border Background="WhiteSmoke"
Margin="10 20"
CornerRadius="5">
<StackPanel Margin="25">
----------- We will add other controls here ---------
</StackPanel>
</Border>
</StackPanel>
</Grid>

Now, inside the inner TextBlock, let us add a Label as follows :

<TextBlock
Style="{StaticResource MaterialDesignSubheadingTextBlock}"
HorizontalAlignment="Center"
Text="Please enter your credentials">
</TextBlock>

One of the amazing controls, I used very often is the TextBox (PasswordBox) with a Floating Hint, let’s use two for the username and the password :

<TextBox Margin="20"
materialDesign:HintAssist.Hint="Username"
materialDesign:HintAssist.Foreground="Green"
materialDesign:TextFieldAssist.UnderlineBrush="Green"
Style="{StaticResource MaterialDesignFloatingHintTextBox}"/>
<PasswordBox
Margin="20"
materialDesign:HintAssist.Hint="Password"
materialDesign:HintAssist.Foreground="Green"
materialDesign:TextFieldAssist.UnderlineBrush="Green"
Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />

You can not really build a login view without a Login (and maybe a Register/Sign up) button :

<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Margin="15 20"
Content="Login"/>
</StackPanel>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Label Content="You can always"
Margin="0 0 0 0" />
<Button Margin="-15 -5 0 0"
Style="{StaticResource MaterialDesignFlatButton}"
ToolTip="MaterialDesignFlatButton"
Content="Register"/>
</StackPanel>

Hope it was useful and helpful !