Getting Started With First .NET MAUI Application Using Visual Studio 2022

Introduction

.Net MAUI is a cross-platform framework for creating native mobile and desktop app with C# and XAML. In my previous article, we did warn welcome to Dotnet MAUI and shared information about the history of Xamarin.

MAUI as everybody already knows is a name for a new upgrade solution as a Multi-platform APP UI framework for building native cross-platform apps with .Net for android, iOS, macOS, and Windows. I am going to show how to create, build and debug the First MAUI application using Visual Studio 2022.

MAUI and other third-party framework teams started working on support for upgrading the app and old NuGet package to MAUI. MAUI will also provide you support for building the apps in different modern patterns and frameworks MVVM, MVU, and RxUI.

.NET MAUI IDE

Microsoft provided 3 fantastic IDE Tools to create and develop apps with .NET MAUI and the happy news is MAUI is an open-source.

1. Visual Studio
2. Visual Studio for Mac
3. Visual Studio Code

Visual Studio 2022

On Windows or Mac machines you can use Visual Studio Code or Visual Studio/ VS for Mac for development. You will need the visual studio 2022 17.1.0 preview version. Microsoft released Visual studio 2022 version 17.0 in Nov month, but MUAI is still in preview so you can install Visual Studio 2022 17.1.0 preview version to create your first MUAI application.

After installation success, Open the Visual Studio IDE

In this sample demo application, I am  going to show Android, iOS, and Windows app using MAUI, so get started with “Create New Project”

On the new Project template, select project type as an” MAUI” and you will all the MAUI preview template, if you are not finding the MAUI template means, you have not installed the latest preview version so make sure you have installed the latest preview version 17.1 ++.

In the Configure your new project window, name your project, choose your project location where you need to save, and click the Create button

MAUI Project Solutions Structure

After clicking on Create, MAUI solutions default template is loaded with all the related MAUI NuGet packages. There is a single project with different platform folders and resources.

MainPage.XAML

The main page, whichever design, will support all other platforms as well, and also Main Page XAML build action modified in MAUI app.

Main Page.Xaml build action modified with MAUIXAML, make sure Xaml Build action is correct.

Right click on the XAML page >>Properties>>BuildAction of XAML Page to MauiXaml.

.NET Generic Host

The Worker Service templates, create a .NET Generic Host, HostBuilder. The Generic Host can be used with other types of .NET applications, such as Console apps.

Maui Program class enables apps to be initialized from a single location, and provides the ability to configure fonts, services, and third-party libraries.

iOS, Android, windows, and all the platform entry point calls a CreateMauiApp method of the static MauiProgram class that creates and returns a MauiApp, while lunching the application

Application Class

The App class derives from the Application class

Resources

The resources are a good improvement in MAUI. The AppIcon, image and font folder will be available under the MAUI project and it is just a single SVG, looks like Maui will just automatically take care of generating all the different icon sizes for different devices.

Run IOS App

Building MAUI iOS applications requires access to Apple's build tools, which only run on a Mac. Because of this, Visual Studio 2022 must connect to a network-accessible Mac to build iOS applications.

You must install the Xcode 13.1++ version on the Mac machine before connecting Visual Studio 2022 to the Windows machine.

Windows	Mac
Connect same wifi network	Connect same wifi network
Install Visual studio 2022 with MAUI	Install Xcode 13.1 ++
On Network preference > switch on Remote login
Pair to Mac machine from windows

Program.cs

Program class file is the main entry file on iOS app and executes the main method of the application, here you can define your custom app delegate file and other configuration files

using UIKit;
namespace FirstMUAIApp {
    public class Program {
        // This is the main entry point of the application.
        static void Main(string[] args) {
            // if you want to use a different Application Delegate class from "AppDelegate"
            // you can specify it here.
            UIApplication.Main(args, null, typeof(AppDelegate));
        }
    }
}

Appdelegate.cs

Each platform will call MauiProgram static class for initializing. On iOS will call as below,

using Foundation;
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
namespace FirstMUAIApp {
    [Register("AppDelegate")]
    public class AppDelegate: MauiUIApplicationDelegate {
        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

You can select iOS simulator and device and click Run icon for executing the application.

The output will be as below,

Run Android App

The android application, MainApplication.cs will execute first, it will call the MauiProgram static class initially as like below

using System;
using Android.App;
using Android.Runtime;
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
namespace FirstMUAIApp {
    [Application]
    public class MainApplication: MauiApplication {
        public MainApplication(IntPtr handle, JniHandleOwnership ownership): base(handle, ownership) {}
        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

You can select android simulator or device as below, press F5 to run the application

The output like below,

Run Windows App

The Windows application executes  App.xaml.cs file first, it will call the MauiProgram static class initially as like below,

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.UI.Xaml;
using Windows.ApplicationModel;
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace FirstMUAIApp.WinUI {
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    public partial class App: MauiWinUIApplication {
        /// <summary>
        /// Initializes the singleton application object. This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App() {
            this.InitializeComponent();
        }
        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
        protected override void OnLaunched(LaunchActivatedEventArgs args) {
            base.OnLaunched(args);
            Microsoft.Maui.Essentials.Platform.OnLaunched(args);
        }
    }
}

Select the device and run the Application.

Demo Video

I have shared a recorded demo video with two versions, English and Tamil. It will help you to understand more about creating, building, and debugging the First MAUI application.

Hope this article is very useful for you, if you have any questions/ feedback/ issues, please write in the comment box