WPF MahApps Custom Login

Recently I was doing a project for one of my client.I was thinking for some styling in login so I choose MahApp's Login dialogue.

The Window will look like the below image(Login window above our Main window)

First you have to Install MahApp's using Nuget Package Manager.

Here I have created a Login user control and done some styling to look good.

<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Width="64" Height="25" Fill="#009aec" />
<ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions >
<RowDefinition ></RowDefinition>
<RowDefinition Height="10"></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>< /Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Grid.Row="0" >User ID :</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" >Password :</TextBlock>
<TextBox Name="TextBoxUserName" Height="25" VerticalAlignment="Top" Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2"/>
<PasswordBox Grid.Column="2" Grid.Row="2" Name="PasswordBox1" Height="25" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
<Button Grid.Column="2" IsDefault="True" Grid.Row="4" VerticalAlignment="Top" Width="100" Foreground="#ffffff" Name="ButtonLogin" Background="#009bEF">Login</Button>
<Button Grid.Column="3" Grid.Row="4" Name="ButtonCancel" VerticalAlignment="Top" Width="100" Foreground="#ffffff">Cancel</Button>
</Grid>
</Grid>

Then we have to integrate the login to Main window Load event. So that no one can visit without login.

private CustomDialog _customDialog;
private Login1 _loginwindow;
private async void Window1_OnLoaded(object sender, RoutedEventArgs e)
{
MetroDialogOptions.ColorScheme = MetroDialogColorScheme.Accented;
_customDialog = new CustomDialog();
var mySettings = new MetroDialogSettings()
{
AffirmativeButtonText = "OK",
AnimateShow = true,
NegativeButtonText = "Go away!",
FirstAuxiliaryButtonText = "Cancel",
};
_loginwindow = new Login1();
_loginwindow.ButtonCancel.Click += ButtonCancelOnClick;
_loginwindow.ButtonLogin.Click += ButtonLoginOnClick;
_customDialog.Content = _loginwindow;
await this.ShowMetroDialogAsync(_customDialog);
}

I have written code for button OK and Cancel.

private void ButtonLoginOnClick(object sender, RoutedEventArgs e)
{
if (_loginwindow.TextBoxUserName.Text == "admin" && _loginwindow.PasswordBox1.Password == "admin")
{
this.HideMetroDialogAsync(_customDialog);
} else
{
MessageBox.Show("Invallid Username or Password");
}
}
private void ButtonCancelOnClick(object sender, RoutedEventArgs e)
{
this.Close();
}

Here I have used async modifier and await keyword.

Asynchronous Programming with Async and Await

I hope you like to use this login.