How to Create a Login Layout Using WPF XAML
In This Article, I’m demonstrating
- Login Layout is shown below using XAML WPF.
- Inline Style Separation using Resource Dictionary
- Adding MahApps Metro Icon Packs
Prerequisites
Create a WPF Login View
First, create a WPF application using Visual Studio Community.
If you are completely new to WPF please watch the video in this link to get started, otherwise skip the video.
Create a Views Folder in the Solution Explorer and Add a new UserControl named LoginView.
Then paste the code below inside your UserControl (you can replace your empty Grid control) by the Border shown below.
<Border Width="300"
Height="400"
Background="White"
CornerRadius="6">
<Border.Effect>
<DropShadowEffect BlurRadius="15"
Direction ="-90"
RenderingBias ="Quality"
ShadowDepth ="2"
Color ="Gray" />
</Border.Effect>
<StackPanel Orientation="Vertical"
Margin="20">
<TextBlock Text="Login"
FontSize="25"
HorizontalAlignment="Center"
VerticalAlignment="Top"
FontWeight="Bold"
Padding="10"
/>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="User Name"
Grid.Row="0"
Margin="0,15"
HorizontalAlignment="Left"/>
<TextBox Grid.Column="1"
Grid.Row="1"
Padding="0,5"
Width="255"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"
Text="MP Codes"/>
<TextBlock Text="Password"
Grid.Row="2"
Margin="0,15"
HorizontalAlignment="Left"/>
<PasswordBox Grid.Row="3"
Password="mpcodes"
Padding="0,5"
Width="255"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"/>
</Grid>
<TextBlock Text="forgot password?"
HorizontalAlignment="Right"/>
<Button x:Name="LoginBtn"
Content="Login"
Foreground="White"
Background="Black"
Margin="0,25"
Height="35"
Width="250">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="LoginBorder" Background="{TemplateBinding Background}"
CornerRadius="16">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue" TargetName="LoginBorder" />
<Setter Property="TextBlock.Foreground" Value="Black" TargetName="LoginBorder" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<TextBlock Text="Not a member?"
Margin="0,5"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"/>
<TextBlock Text="Sign Up"
Margin="0,10"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"/>
</StackPanel>
</Border>- To Run the Code, click on Crtl + F5 or press the green triangle button on top mid.
Video Demo Part 1
Inline Style Separation using Resource Dictionary
The above code is so cluttered with lots of inline styles.
To make it more readable, we need to separate our inline styles into a Resource Dictionary.
So, Create a Folder Named Styles and Add Resource Dictionary for Border, Button, TextBlock, and TextBox to Separate their respective inline styles.
<!--BorderStyles.Xaml-->
<Style x:Key="DefaultBorder" TargetType="Border">
<Setter Property="Background" Value="White"/>
<Setter Property="CornerRadius" Value="6"/>
</Style>
<Style x:Key="BorderStyle"
TargetType="{x:Type Border}"
BasedOn="{StaticResource DefaultBorder}">
<Setter Property="Width" Value="300"/>
<Setter Property="Height" Value="400"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="15"
Direction ="-90"
RenderingBias ="Quality"
ShadowDepth ="2"
Color ="Gray" />
</Setter.Value>
</Setter>
</Style> <!--ButtonStyle.xaml-->
<Style x:Key="LoginButtonStyle" TargetType="Button">
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Margin" Value="0,25"/>
<Setter Property="Content" Value="Login"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="LoginBorder" Background="{TemplateBinding Background}"
CornerRadius="16">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue" TargetName="LoginBorder" />
<Setter Property="TextBlock.Foreground" Value="Black" TargetName="LoginBorder" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--TextBlockStyle.xaml-->
<Style x:Key="DefaultTextBlock" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="0,15"/>
</Style>
<Style x:Key="SignUpTextBlock"
TargetType="TextBlock"
BasedOn="{StaticResource DefaultTextBlock}">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="0,5" />
</Style>
<Style x:Key="LoginTextBlock"
TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="25" />
<Setter Property="Padding" Value="10" />
</Style> <!--TextBoxStyle.xaml-->
<Style x:Key="LoginTextBox" TargetType="TextBox">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Width" Value="255"/>
<Setter Property="Padding" Value="0,5"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
</Style>
<Style x:Key="LoginPasswordBox" TargetType="PasswordBox">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Width" Value="255"/>
<Setter Property="Padding" Value="0,5"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
</Style>Then Merge these Dictionaries into your Application Resources.
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/BorderStyle.xaml"/>
<ResourceDictionary Source="Styles/ButtonStyle.xaml"/>
<ResourceDictionary Source="Styles/TextBoxStyle.xaml"/>
<ResourceDictionary Source="Styles/TextBlockStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>Finally, replace your LoginView style with the below code or Bind your Separated styles using StaticResource for each control.
<Border Style="{StaticResource BorderStyle}">
<StackPanel Orientation="Vertical"
Margin="20">
<TextBlock Text="Login"
Style="{StaticResource LoginTextBlock}"/>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="User Name"
Grid.Row="0"
Style="{StaticResource DefaultTextBlock}"/>
<TextBox Grid.Column="1"
Grid.Row="1"
Text="MP Codes"
Style="{StaticResource LoginTextBox}"/>
<TextBlock Text="Password"
Grid.Row="2"
Style="{StaticResource DefaultTextBlock}"/>
<PasswordBox Grid.Row="3"
Password="mpcodes"
Style="{StaticResource LoginPasswordBox}"/>
</Grid>
<TextBlock Text="forgot password?"
HorizontalAlignment="Right"/>
<Button x:Name="LoginBtn"
Style="{StaticResource LoginButtonStyle}"/>
<TextBlock Text="Not a member?"
Style="{StaticResource SignUpTextBlock}"/>
<TextBlock Text="Sign Up"
Style="{StaticResource SignUpTextBlock}"/>
</StackPanel>
</Border>That’s it your style is now clean and more readable than prior.
Video Demo Part 2
Adding MahApps Metro Icon Packs to LoginView
To add MahApps Icons to our LoginVIew first we need to install MahApps into your application.
To do that, go to Tools ->NuGet Package Manager->Manage NuGet Package for Solution.
Then Browse, MahApps.Metro.IconPacks, then select your project and click Install.
Now we are going to add icons to Login Button, Username TextBox, and PasswordBox.
To use the icon packs, Add the namespace
// Add NameSpace to ButtonStyle.xaml
<!--xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"-->
// Replace the content inside the ControlTemplate by below code
<Border x:Name="LoginBorder"
Background="{TemplateBinding Background}"
CornerRadius="16">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<iconPacks:PackIconMaterial Kind="LoginVariant"
Width="16"
Height="16"
Margin="10,0"
VerticalAlignment="Center"/>
</StackPanel>
</Border>// Add NameSpace to TextBoxStyle.xaml
<!--xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"-->
// Add Template to LoginTextBox Style
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border BorderBrush="Gray"
BorderThickness="0,0,0,1">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<iconPacks:PackIconModern Width="16"
Height="16"
Margin="0,5,10,10"
Kind="User" />
<ContentPresenter Content="{TemplateBinding Text}"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>Adding Content Presenter to PasswordBox is a bit tricky because PasswordBox’s Password property is not a dependency property.
<!--Replace PasswordBox in LoginView.xaml by the below Border-->
<Border BorderBrush="Gray"
Grid.Row="3"
BorderThickness="0,0,0,1">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<iconPacks:PackIconModern Width="16"
Height="16"
Margin="0,2,10,0"
Kind="Lock" />
<PasswordBox Password="mpcodes"
Style="{StaticResource LoginPasswordBox}"/>
</StackPanel>
</Border>Video Demo Part 3
If you like this article, don’t forget to subscribe to my YouTube and follow me on Medium.
Thank You :)
