WPF MahApps Custom Login

In this blog we will learn about 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.