.Net Multi-Platform App UI - Designing Registration Form

.Net Multi-Platform App UI - Registration Form

In this tutorial series, we will see the basic layout of sign-up screen using the MAUI controls in Visual Studio 2022 on Windows, or Visual Studio 2022 for Mac 17.4 Preview.

Project Setup

To create .NET MAUI apps, we need the latest Visual Studio 2022 installed with .NET Multi-platform App UI development workload with its default optional installation options in our PC or mac machine.

Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.

.Net Multi-Platform App UI - Registration Form

In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:

.Net Multi-Platform App UI - Registration Form

In the Configure your new project window, name your project, choose a suitable location for it, and click the Next button:

.Net Multi-Platform App UI - Registration Form

In the Additional information window, click the Create button,

.Net Multi-Platform App UI - Registration Form
 
Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app,
 
.Net Multi-Platform App UI - Registration Form

Implementation

Open the MainPage.xaml page designer file and add the following entries for email and password like below

<?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="MauiRegistration.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="Register Screen"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="16"
                HorizontalOptions="Center" />

            <HorizontalStackLayout VerticalOptions="Center"
                                   HorizontalOptions="FillAndExpand"
                                   BackgroundColor="#e1e1e1"
                                   Padding="10,0,10,0"
                                   SemanticProperties.HeadingLevel="Level2">
            <Entry 
                Text=""
                Placeholder="Enter mail id"
                HorizontalOptions="FillAndExpand"
                    PlaceholderColor="Black"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Enter mail id"
                FontSize="14"/>
            </HorizontalStackLayout>
            <HorizontalStackLayout VerticalOptions="Center"
                                   HorizontalOptions="FillAndExpand"
                                   BackgroundColor="#e1e1e1"
                                   Padding="10,0,10,0"
                                   SemanticProperties.HeadingLevel="Level2">
                <Entry 
                Text=""
                Placeholder="Enter password"
                    PlaceholderColor="Black"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Enter password"
                FontSize="14"
                HorizontalOptions="FillAndExpand"
                IsPassword="True"/>
            </HorizontalStackLayout>
            <Button 
                x:Name="btn_register"
                Text="Register"
                SemanticProperties.Hint="Register the user when click"
                Clicked="OnRegisterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

Result

Android

.Net Multi-Platform App UI - Registration Form

Windows

.Net Multi-Platform App UI - Registration Form

Download

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Similar Articles