.Net Multi-Platform App UI - Designing 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.

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:

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

In the Additional information window, click the Create button,

 

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,
 

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>

JavaScript

Result

Android

Windows

Creating MAUI APP Project And Understanding Its Folder Structure In VS 2022

 MAUI is a multi-platform framework that is used to create applications in various cross-platforms from a single shared codebase. This is like an extension to the XAMARIN line up which was previously used for building applications for different platforms under the required configuration. The key extension would be from the UI side where one can perform individual Displays using graphic libraries on a single shared codebase.

There is a baseline called BCL which is elaborated as Base Class Library which is represented as common business logic to the defined user interface based on the given platform. There is a bit requirement of prerequisites for MAUI as such having touch with any visual studio version which we release as on date. This article will be sharing all the installation process for visual studio 2022.

How to install Visual Studio 2022

Step 1

This link will redirect to VS preview website and click on download.

Step 2

After the file is downloaded click on the installer file, after few updates below image will be opened. Then click on install.

Step 3

Select required frameworks as required, as discussed make sure to select .NET MAUI in the optional column and click on Install. As I already have the file it is showing as Modify.

That's it we are good to go for creating a project in VS 2022.

Creating First MAUI App 

Once after downloading the Visual Studio launch the application.

Step 1

Click on create a new project and in search bar type MAUI, we will be getting some results. Click on MAUI App to create a project with a name as required.

Step 2

Click on dependencies as shown in the solution explorer, right-click, and click on manage NuGet packages, Then the solution will restore the required files required for the android.

Step 3

Android emulators required for xamarin will end up with an error. To resolve the error, click on this link.

XA5207:- Error Could do not find android.jar for API level 31.

Error XA0031 Java SDK 11.0 or above is required when using .NET 6 or higher.

dotnet workload update --no-cache --disable-parallel --from-rollback-file

That's it, we have installed Visual Studio 2022 and created an MAUI project.

Introduction To .NET Multi-Platform App UI (MAUI) - An Overview

 

Introduction

What if we could create native mobile apps and desktop apps using .NET C# and XAML from a single code base? How cool would that be? Yes, now we can create native Android, iOS, macOS, and Windows applications from a single code base. This is possible using .NET’s new feature called Multi-platform App UI (MAUI). In this article, we will discuss more MAUI, by the end of this article you will get some basic ideas about MAUI and how to get started.

Table of Contents

• What is MAUI
• MAUI vs Xamarin Forms
• Similarities between MAUI and Xamarin Forms
• Who can use MAUI Framework
• MAUI Architecture
• Features of MAUI
• IDEs for Developing MAUI
• MAUI for Web Applications
• Getting Started with MAUI
• Building Sample Application
• MAUI Project Structure
• Conclusion

What is MAUI

As stated before, MAUI means Multi-Platform App UI which is an open-source cross-platform framework. We can develop and build native Android, iOS, macOS, and Windows applications from a single code base using MAUI.

MAUI is an evolution of Xamarin.Forms, which extended from Mobile to Desktop application. If you are already worked on Xamarin.Forms, you can easily relate .NET MAUI.

Fig. 1 MAUI (Image Credit Microsoft)

MAUI vs Xamarin Forms

The evolution of Xamarin forms will be integrated into the single. NET. With .NET 6, the native application development becomes a part of. NET. Single MAUI project is for all platforms is the most important advantage.

Similarities between MAUI and Xamarin Forms

• We still can use XAML and C# to develop the applications
• We can choose MVVM, Reactive UI, Model-View-Update
• We can build Android, iOS, macOS, Windows desktop applications using the MAUI framework.
• If you already have experience with Xamarin, you can easily relate to MAUI.

Who can use MAUI Framework

• Developers who want to build cross-platform applications using C# and XAML from a single code base.
• Across platforms to share the same UI layouts and designs, which saves more time in design implementations.
• Across the platforms, to apply the same business logic, code, and testing.

MAUI Architecture

In a .NET MAUI app, we write code that primarily interacts with,

• The .NET MAUI API first (marked as 1 in the image Fig.2).
• Then the .NET MAUI directly consumes the native platform APIs (marked as 3 in the image Fig.2).
• App code may directly exercise platform APIs if required (marked as 2 in the image in the image Fig.2).

Fig.2 Architecture of MAUI (Image credits Microsoft)

.NET MAUI apps compiled into native app packages,

• Android apps built using .NET MAUI compile from C# into an intermediate language (IL) which is then just-in-time (JIT) compiled to a native assembly when the app launches.
• iOS apps built using .NET MAUI are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.
• macOS apps built using .NET MAUI use Mac Catalyst, a solution from Apple that brings your iOS app built with UI Kit to the desktop, and augments it with additional App Kit and platform APIs as required.
• Windows apps built using .NET MAUI use Windows UI Library (WinUI) 3 to create native apps that can target the Windows desktop and the Universal Windows Platform (UWP).

Features of MAUI

.NET MAUI provides cross-platform APIs for native device features. Here are some good features provided by MAUI,

• Access to sensors, such as the accelerometer, compass, and gyroscope on devices.
• Ability to check the device’s network connectivity state, and detect changes.
• Provide information about the device the app is running on.
• Copy and paste text to the system clipboard, between apps.
• Pick single or multiple files from the device.
• Store data securely as key/value pairs.
• Utilize built-in text-to-speech engines to read text from the device.
• Initiate browser-based authentication flows that listen for a callback to a specific app registered URL.
• .NET MAUI includes support for .NET hot reload

IDEs for Developing MAUI Application

• Visual Studio
• Visual Studio Code

Using these two IDEs, we can build native Android, iOS, macOS, and Windows applications using MAUI. Just coding is all we need, then choosing Visual Studio Code is a wise option.

MAUI for Web Applications

There is an option to integrate the Blazor application into MAUI using WebView.

Getting Started with MAUI

Installing MAUI

At the time of writing this article, we have to follow the below-mentioned steps. These will be changing as new releases of Visual Studio and .NET MAUI are released.

• Framework – .NET 6 Preview 6 with .NET MAUI
• Platform SDKs – Android, iOS, macOS, tvOS, and Mac Catalyst
• IDE – Visual Studio 2022 preview with the workloads Desktop and Mobile

Fig.3 Workloads required for MAUI using Visual Studio 2022 Preview

Install MAUI workloads using .NET CLI,

dotnet workload install maui

BASIC

Install Missing Components,

dotnet tool install -g redth.net.maui.check

BASIC

Check,

maui-check

BASIC

If any tools and SDKs required by .NET MAUI are missing, maui-check will install them. The example below shows the output generated if the tools and SDKs required by .NET MAUI are already installed,

| \ | | | ____| |_   _|   |  \/  |    / \    | | | | |_ _|
     |  \| | |  _|     | |     | |\/| |   / _ \   | | | |  | |
  _  | |\  | | |___    | |     | |  | |  / ___ \  | <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> |  | |

 (_) <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> \_| |_____|   <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;">     <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;">  <img width="16" height="16" class="wp-smiley emoji" draggable="false" alt="|_|" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/white-russian.svg" style="height: 1em; max-height: 1em;"> /_/   \_\  \___/  |___|
 .NET MAUI Check v0.6.1.0
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
This tool will attempt to evaluate your .NET MAUI development environment.
If problems are detected, this tool may offer the option to try and fix them for you, or suggest a way to fix them yourself.
Thanks for choosing .NET MAUI!
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
» Synchronizing configuration... ok
» Scheduling appointments... ok
> OpenJDK 11.0 Checkup...
  - 11.0.10 (C:\Program Files\Microsoft\jdk-11.0.10.9-hotspot\bin\..)
  - 1.8.0-25 (C:\Program Files\Android\Jdk\microsoft_dist_openjdk_1.8.0.25)
> Visual Studio 17.0.0-pre.2.0 Checkup...
  - 17.0.0-pre.2.0 - C:\Program Files\Microsoft Visual Studio\2022\Preview
> Android SDK Checkup...
  - emulator (30.7.5)
  - build-tools;30.0.2 (30.0.2)
  - platforms;android-30 (3)
  - system-images;android-30;google_apis_playstore;x86 (9)
  - platform-tools (31.0.2)
> Android Emulator Checkup...
  - Emulator: pixel_2_r_11_0_-_api_30 found.
> .NET SDK Checkup...
  - 2.1.700 - C:\Program Files\dotnet\sdk\2.1.700
  - 2.1.816 - C:\Program Files\dotnet\sdk\2.1.816
  - 3.1.410 - C:\Program Files\dotnet\sdk\3.1.410
  - 5.0.101 - C:\Program Files\dotnet\sdk\5.0.101
  - 5.0.104 - C:\Program Files\dotnet\sdk\5.0.104
  - 5.0.204 - C:\Program Files\dotnet\sdk\5.0.204
  - 6.0.100-preview.6.21355.2 - C:\Program Files\dotnet\sdk\6.0.100-preview.6.21355.2
> .NET SDK - Workload Deduplication Checkup...
> Edge WebView2 Checkup...
  - Found Edge WebView2 version 91.0.864.67
> .NET SDK - Workloads (6.0.100-preview.6.21355.2) Checkup...
  - microsoft-android-sdk-full (Microsoft.NET.Sdk.Android.Manifest-6.0.100 : 30.0.100-preview.6.62) installed.
  - microsoft-ios-sdk-full (Microsoft.NET.Sdk.iOS.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-maccatalyst-sdk-full (Microsoft.NET.Sdk.MacCatalyst.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-tvos-sdk-full (Microsoft.NET.Sdk.tvOS.Manifest-6.0.100 : 15.0.100-preview.6.63) installed.
  - microsoft-macos-sdk-full (Microsoft.NET.Sdk.macOS.Manifest-6.0.100 : 12.0.100-preview.6.63) installed.
  - maui (Microsoft.NET.Sdk.Maui.Manifest-6.0.100 : 6.0.100-preview.6.1003) installed.
  - microsoft-net-runtime-android (microsoft.net.workload.mono.toolchain.manifest-6.0.100 : 6.0.0-preview.6.21352.12)
installed.
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
- Congratulations, everything looks great!

BASIC

A new dotnet workload install a command is available for installing the mobile workloads. Install MAUI Workloads in another way.

On Windows, in an Administrator command prompt,

dotnet workload install maui

BASIC

And then install the below-listed workloads one by one as well,

dotnet workload install maui-android
dotnet workload install maui-ios
dotnet workload install maui-maccatalyst
dotnet workload install maui-windows
dotnet workload install microsoft-android-sdk-full
dotnet workload install microsoft-ios-sdk-full
dotnet workload install microsoft-maccatalyst-sdk-full
dotnet workload install microsoft-maccatalyst-sdk-full
dotnet workload install microsoft-macos-sdk-full
dotnet workload install microsoft-tvos-sdk-full

BASIC

Building Sample Application

In this example, we are going to create an MAUI application using Visual Studio 2022. First, let's create a new application by running the below command in the Command Prompt,

dotnet new maui -n HelloMaui

BASIC

Now open Visual Studio 2022 and open the created project from Open a project or solution and browse the project.

Fig.4 Browse our newly created MAUI project

We have to wait for a while to load the dependencies.

MAUI Project Structure

The below image shows the project structure of the MAUI application.

Fig.5 Project Structure of MAUI Application

We will discuss each file in this project in our next article (refer here).

Run the MAUI Application

To run the MAUI Application, we need either an Emulator or Local Android device connected with our system for mobile application. To run our application on a local Android device, we have to enable the developer settings.

Fig. 6 To run MAUI Application from VS click the start button

• In the Visual Studio toolbar, press the Start button to launch the app in your chosen Android emulator or Android Local Device.
• In the running app press, the CLICK ME button several times and observe that the count of the number of button clicks is incremented.

Fig 7. Running MAUI Application

In my next article, we will discuss how to run the MAUI application by using installing it into an Android phone.

Some useful MAUI GitHub resources

• https://github.com/dotnet/maui
• https://github.com/dotnet/maui-samples
• https://github.com/dotnet/maui/wiki/FAQs