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.