Getting Started With .NET MAUI - First Look

Article

Introduction

Yes, now it has officially been released! We can now create Native Mobile and Desktop with C# & XAML. This is a cross-platform framework called .NET MAUI. MAUI stands for Multiple-Platform Application UI. Using it, we can develop applications for Android, iOS, Windows, and macOS from a single code base. This also means that from a single project, we can export applications to multiple platforms.

Introduction
What is MAUI
.NET MAUI is for
Install Visual Studio 2022 Preview
Create First .NET MAUI Application in Visual Studio 2022 Preview
1. .NET MAUI App
  - Project Folder Structure
  - Debugging & Running the Sample App
  - Run Application for Windows Machine
  - Run Application for Android Device
2. .NET MAUI Blazor
  - Project Folder Structure of .NET MAUI Blazor Application
  - Debugging and Running .NET MAUI Blazor Application
  - Run Application for Windows Machine
  - Run Application for Android Platform
Conclusion

What is MAUI

MAUI stands for Multi-Platform App UI . It is an open-source cross-platform framework. Using MAUI, we can develop and build native Android, iOS, macOS, Mac Catalyst, Tizen, and Windows applications from a single code base.

MAUI is an evolution of Xamarin.Forms , which extended from Mobile to Desktop applications. If you have already worked on Xamarin.Forms , you will easily relate to .NET MAUI.

.NET MAUI is for

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.

Install Visual Studio 2022 Preview

At the time that this article was written, .NET MAUI is available only in the Visual Studio 2022 Preview. Download Visual Studio 2022 Preview from here .

Once downloaded and installed, choose .NET Multi-platform App UI Development Workload from the list shown below.

Fig.1 Choose .NET Multi-platform App UI Development

After successful installation, it’s always better to restart the machine and then launch Visual Studio 2022 Preview.

Create First .NET MAUI Application in Visual Studio 2022 Preview

Launch Visual Studio 2022 Preview.
Choose to Create a new Project and Search for MAUI.
Fig. 2: Choose to Create a New Project
.NET MAUI has three categories, .NET MAUI App , . NET MAUI Blazor App , .NET MAUI Class Library .
Fig. 3 .NET MAUI Projects Categories
We will look at more details of each category in upcoming articles. For now, in the. NET MAUI App, we can build applications for Androi d, iOS, Mac Catalyst, macOS, MAUI, Tizen, and Windows from a single code base
.NET MAUI Blazor App – These applications are built using Blazor and are able to run in iOS, Android, Mac Catalyst, Tizen, and WinUI from a single code base.
.NET MAUI Class Library – These applications are built using .NET MAUI as a Class Library and are able to run applications in Android, iOS, Mac Catalyst, macOS, Tizen, and Windows.

.NET MAUI App

Let’s create our first .NET MAUI App.

Choose the .NET MAUI App from the Project Template options and click Next .
Fig.4 Choose .NET MAUI App as Project Template
Save it in the location by providing the project name.
Fig. 5 Project Name and Location
.NET MAUI App uses XAML and is similar to WPF.
Fig. 6 .NET MAUI App

Project Folder Structure

The default project folder structure looks like what is shown below:

Fig. 7 Project Folder Structure

Debugging & Running the Sample App

To run the application, we have multiple options:

Fig. 8 Running a .NET MAUI App

We can run the application for the target devices like Windows Machine, Andriod Emulators, iOS Local Device, iOS Simulators, iOS Remote Devices .

Run the Application for the Windows Machine

Fig. 9 Windows Machine Output

Run Application for Android Device

Fig.10 Android Output of .NET MAUI App

.NET MAUI Blazor

.NET MAUI Blazor uses Blazor, and using Blazor, we can export applications for Multiple Platforms.
Choose .NET MAUI Blazor from the Project Template while creating a new project and save it.

Fig. 11 Choose the .NET MAUI Blazor App fromthe Project Template

Project Folder Structure of .NET MAUI Blazor Application

Below is what the default project folder structure looks like. If you are already familiar with Blazor, then this will be very easy for you.

Fig. 12 MAUI Blazor Application Folder Structure

Debugging and Running .NET MAUI Blazor Application

This project also has similar options to the .NET MAUI App to export the application to multiple platforms. Let’s run the application for multiple platforms.

Fig. 13 Debug Options for .NET MAUI Blazor App

Run the Application for the Windows Machine

Fig. 14 .NET MAUI Blazor Application for Windows Machine

Run Application for Android Platform

Fig. 15 .NET MAUI Blazor Application Output for Android Platform

Conclusion

In this article, we discussed how to create .NET MAUI applications and debug them on multiple platforms. In this article, we also discussed debugging for Windows and Android devices. We have not covered iOS and Mac devices, which we will cover in upcoming articles. Please feel free to share your feedback in the comment section.