.NET MAUI Login screen development

MAUI is a cross platform framework that we can develop mobile and desktop apps with a single code base. (We must have Visual Studio 2022)

I am going to show you how to develop a login screen!

We will use .NET MAUI App template like below,

Let’s start it first,

Easy to start, and understand! It has rendered MainPage.xamlwhich has been decided inside AppShell.xaml

Let’s create a page called Login!

And change Appshell.xaml like this,

Then run again,

Look’s pretty 🙂

If we are talking about Login Page. We need to add 3 inputs,

<VerticalStackLayout WidthRequest="500" Margin="100">
    <Label Text="Welcome!" HorizontalTextAlignment="Center" FontSize="25"></Label>
    <Entry Placeholder="Mail Address"/>
    <Entry IsPassword="True" Placeholder="Password"/>
    <Button Text="Login"></Button>
</VerticalStackLayout>

Everything up to now is okay, but how would we handle button click event?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ExampleApp.Login"
             Title="Login">
    <VerticalStackLayout WidthRequest="500" Margin="100">
        <Label Text="Welcome!" HorizontalTextAlignment="Center" FontSize="25"></Label>
        <Entry Placeholder="Mail Address"/>
        <Entry IsPassword="True" Placeholder="Password"/>
        <Button Text="Login" Clicked="Button_Clicked"></Button>
    </VerticalStackLayout>
</ContentPage>

public partial class Login : ContentPage
{
    public Login()
    {
       InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
     // will handle button's click
    }
}

Okay, button’s handler is ready but also we need to read our entries values,

Let’s create a model class,

public class LoginModel
{
    public string MailAddress{ get; set; }
    public string Password { get; set; }
}

And declare this as property inside our LoginPage,

private LoginModel loginModel;
public Login()
{
    InitializeComponent();
    loginModel = new LoginModel();   
    BindingContext = loginModel;
}

private async void Button_Clicked(object sender, EventArgs e)
{
    if (!loginModel.MailAddress.Contains("@"))
    {
        await DisplayAlert("Error", "Please Enter a Valid Email Address", "Yes");
    }
    else
    {
        await DisplayAlert("Hi", $"Welcome {loginModel.MailAddress}", "Ok");
    }
}

We had also gave this model as BindingContext which will populated with entries, but we need to tell entry that it’s property to set.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ExampleApp.Login"
             Title="Login">
    <VerticalStackLayout WidthRequest="500" Margin="100">
        <Label Text="Welcome!" HorizontalTextAlignment="Center" FontSize="25"></Label>
        <Entry Text="{Binding MailAddress}" Placeholder="Mail Address"/>
        <Entry Text="{Binding Password}" IsPassword="True" Placeholder="Password"/>
        <Button Text="Login" Clicked="Button_Clicked"></Button>
    </VerticalStackLayout>
</ContentPage>

{Binding XXXX} is going to set entry’s value to BindingContext

Easy. Right? 🙂