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.
  1. <Grid>  
  2.     <Grid.Resources>  
  3.         <Style TargetType="{x:Type Button}">  
  4.             <Setter Property="Template">  
  5.                 <Setter.Value>  
  6.                     <ControlTemplate TargetType="{x:Type Button}">  
  7.                         <Grid>  
  8.                             <Ellipse Width="64" Height="25" Fill="#009aec" />  
  9.                             <ContentControl Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />  
  10.                         </Grid>  
  11.                     </ControlTemplate>  
  12.                 </Setter.Value>  
  13.             </Setter>  
  14.         </Style>  
  15.     </Grid.Resources>  
  16.     <Grid.RowDefinitions >  
  17.         <RowDefinition ></RowDefinition>  
  18.         <RowDefinition Height="10"></RowDefinition>  
  19.         <RowDefinition ></RowDefinition>  
  20.         <RowDefinition Height="20"></RowDefinition>  
  21.         <RowDefinition></RowDefinition>  
  22.         <RowDefinition></RowDefinition>  
  23.     </Grid.RowDefinitions>  
  24.     <Grid.ColumnDefinitions>  
  25.         <ColumnDefinition Width="20"></ColumnDefinition>  
  26.         <ColumnDefinition></ColumnDefinition>  
  27.         <ColumnDefinition></ColumnDefinition>  
  28.         <ColumnDefinition></ColumnDefinition>  
  29.         <ColumnDefinition Width="20"></ColumnDefinition>< /Grid.ColumnDefinitions>  
  30.         <TextBlock Grid.Column="1" Grid.Row="0" >User ID :</TextBlock>  
  31.         <TextBlock Grid.Column="1" Grid.Row="2" >Password :</TextBlock>  
  32.         <TextBox Name="TextBoxUserName" Height="25" VerticalAlignment="Top" Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2"/>  
  33.         <PasswordBox Grid.Column="2" Grid.Row="2" Name="PasswordBox1" Height="25" VerticalAlignment="Top" Grid.ColumnSpan="2"/>  
  34.         <Button Grid.Column="2" IsDefault="True" Grid.Row="4" VerticalAlignment="Top" Width="100" Foreground="#ffffff" Name="ButtonLogin" Background="#009bEF">Login</Button>  
  35.         <Button Grid.Column="3" Grid.Row="4" Name="ButtonCancel" VerticalAlignment="Top" Width="100" Foreground="#ffffff">Cancel</Button>  
  36.     </Grid> 
  37. </Grid> 
Then we have to integrate the login to Main window Load event. So that no one can visit without login.
  1. private CustomDialog _customDialog;  
  2. private Login1 _loginwindow;  
  3. private async void Window1_OnLoaded(object sender, RoutedEventArgs e)  
  4. {  
  5.     MetroDialogOptions.ColorScheme = MetroDialogColorScheme.Accented;  
  6.     _customDialog = new CustomDialog();  
  7.     var mySettings = new MetroDialogSettings()  
  8.     {  
  9.         AffirmativeButtonText = "OK",  
  10.         AnimateShow = true,  
  11.         NegativeButtonText = "Go away!",  
  12.         FirstAuxiliaryButtonText = "Cancel",  
  13.     };  
  14.     _loginwindow = new Login1();  
  15.     _loginwindow.ButtonCancel.Click += ButtonCancelOnClick;  
  16.     _loginwindow.ButtonLogin.Click += ButtonLoginOnClick;  
  17.     _customDialog.Content = _loginwindow;  
  18.     await this.ShowMetroDialogAsync(_customDialog);  
  19. }  
I have written code for button OK and Cancel.
  1. private void ButtonLoginOnClick(object sender, RoutedEventArgs e)   
  2. {  
  3.     if (_loginwindow.TextBoxUserName.Text == "admin" && _loginwindow.PasswordBox1.Password == "admin")   
  4.     {  
  5.         this.HideMetroDialogAsync(_customDialog);  
  6.     } else   
  7.     {  
  8.         MessageBox.Show("Invallid Username or Password");  
  9.     }  
  10. }  
  11. private void ButtonCancelOnClick(object sender, RoutedEventArgs e)  
  12. {  
  13.     this.Close();  
  14. }  
Here I have used async modifier and await keyword.

Asynchronous Programming with Async and Await

I hope you like to use this login.