Getting Started With .NET MAUI – First Look

Introduction

Yes, now it’s officially released !!! We can create Native Mobile and Desktop with C# & XAML and this is a cross-platform framework called .NET MAUI. MAUI stands for Multiple-Platform Application UI. 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

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

What is MAUI

MAUI means Multi-Platform App UI which 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 are already worked on Xamarin.Forms, you can 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 of writing this article, the .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 our upcoming articles, For now, .NET MAUI App we can build applications for Andriod, iOS, Mac Catalyst, macOS, MAUI, Tizen, and Windows from a Single Code Base
  • .NET MAUI Blazor App – These applications are built using Blazor and able to run in iOS, Andriod, Mac Catalyst, Tizen, and WinUI from a Single Code Base.
  • .NET MAUI Class Library – These applications are built using .NET MAUI as 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 to .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 its similar to WPF
Fig. 6 .NET MAUI App

Project Folder Structure

The default project folder structure looks as like as 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 Application for Windows Machine

Fig. 9 Windows Machine Output

Run Application for Andriod 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 to .NET MAUI Blazor App from Project Template

Project Folder Structure of .NET MAUI Blazor Application

Below is what the default project folder structure looks like and 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 .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 Application for 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 Application and debug it on multiple platforms. In this article, We discussed debugging for Windows and Android devices, we have not covered the iOS and Mac devices, which we will cover it in our upcoming articles. Please feel free to share your feedback in the comment section.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: