maui hello world

Microsoft is talking a lot about this new technology and here I will explain how to install MAUI with Visual Studio 2022 and run a first app.

First of all, in my point of view, the most important question is: is Xamarin dead? Just few days ago, James Montemagno released the final Xamarin Podcast and they said:

So we are now what do we call a network load? This is it’s all backed by Nougat in that Nougat is the infrastructure by which we deliver all of our installs for Android, iOS, Mac OS as well as Maui Blazer and all that sort of thing.

So with the net installer, you can actually install optional workloads, of which Maui is now one. So if you are a command line junkie and you really, really enjoy getting getting your fingers dirty with the keystrokes, then this is for you so you can do a network load.

Install command and pass Maui as the workload ID and it will go out and grab all the SDK’s that you need to be able to run a Maui application.

The only thing it’s not going to do for you is get your Android emulators, your iOS, Xcode installed, and some of those other third party dependencies, but in terms of all the net things it’s going to do that for you. Now. The good news is jumping to the other side, the very familiar experience. This is all still. Part of the Visual Studio installer experience. So when you go install Visual Studio in a future release, this isn’t there.

The Final Xamarin Podcast, James Montemagno and David Ortinau

Episode 100: Preview-Mania The .NET MAUI Podcast

Show Notes All the previews and release candidates you could ever want. .NET 6 RC 2 – the final RC. .NET MAUI Preview 9, Visual Studio RC and Preview 5 – there's even a Visual Studio for Mac preview to talk about! Tune in as David and Matt talk all about the previews! New releases .NET MAUI Update (https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-9/?WT.mc_id=dotnet-44737-masoucou) VS 2022 Mac Preview 1 (https://devblogs.microsoft.com/visualstudio/visual-studio-2022-for-mac-preview-1-is-now-available/?WT.mc_id=dotnet-44737-masoucou) VS 2022 Release Candidate and Preview 5 (https://devblogs.microsoft.com/visualstudio/join-us-november-8th-for-the-launch-of-visual-studio-2022/?WT.mc_id=dotnet-44737-masoucou) .NET 6 Release Candidate 2 (https://devblogs.microsoft.com/dotnet/announcing-net-6-release-candidate-2/?WT.mc_id=dotnet-44737-masoucou) Latest news .NET Conf (https://www.dotnetconf.net/) Visual Studio Theme Converter (https://devblogs.microsoft.com/visualstudio/custom-themes/?WT.mc_id=dotnet-44737-masoucou) Cloud news Azure REST API Guidelines (https://devblogs.microsoft.com/azure-sdk/azure-rest-api-guidelines-update/?WT.mc_id=dotnet-44737-masoucou) Azure service of the month QnA Maker (https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/?WT.mc_id=dotnet-44737-masoucou) Follow Us: * James: Twitter (https://twitter.com/jamesmontemagno), Blog (https://montemagno.com), GitHub (http://github.com/jamesmontemagno), Merge Conflict Podcast (http://mergeconflict.fm) * Matt: Twitter (https://twitter.com/codemillmatt), Blog (https://codemilltech.com), GitHub (https://github.com/codemillmatt) * David: Twitter (https://twitter.com/davidortinau), Github (https://github.com/davidortinau)

What is .NET MAUI?

As far as I know, Microsoft started to talk about MAUI from last year in May and I created a post for that. Now, with Visual Studio 2022, it seems MAUI is rolling out and the preview is ready to download and install.

.NET Multi-platform App UI (MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. Using MAUI, you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code-base.

.NET Multi-platform App UI (MAUI) - Install MAUI with Visual Studio 2022
.NET Multi-platform App UI (MAUI)

.NET MAUI is open-source and is the evolution of Xamarin.Forms, extended from mobile to desktop scenarios, with UI controls rebuilt from the ground up for performance and extensibility. If you’ve previously used Xamarin.Forms to build cross-platform user interfaces, you’ll notice many similarities with .NET MAUI. However, there are also some differences. Using .NET MAUI, you can create multi-platform apps using a single project, but you can add platform-specific source code and resources if necessary. One of the key aims of .NET MAUI is to enable you to implement as much of your app logic and UI layout as possible in a single code-base.

Who .NET MAUI is for

.NET MAUI is for developers who want to:

  • Write cross-platform apps in XAML and C#, from a single shared code-base in Visual Studio.
  • Share UI layout and design across platforms.
  • Share code, test, and business logic across platforms.

How MAUI works

First, MAUI unifies Android, iOS, macOS, and Windows APIs into a single API that allows a write-once run-anywhere developer experience, while additionally providing deep access to every aspect of each native platform.

So, .NET6 provides a series of platform-specific frameworks for creating apps for Android, iOS, macOS, and Windows UI (WinUI) Library. These frameworks all have access to the same .NET 6 Base Class Library (BCL). This library abstracts the details of the underlying platform away from your code. The BCL depends on the .NET runtime to provide the execution environment for your code. For Android, iOS, and macOS, the environment is implemented by Mono, an implementation of the .NET runtime. On Windows, WinRT performs the same role, except it’s optimized for the Windows platform.

While the BCL enables apps running on different platforms to share common business logic, the various platforms have different ways of defining the user interface for an app, and they provide varying models for specifying how the elements of a user interface communicate and interoperate. You can craft the UI for each platform separately using the appropriate platform-specific framework (.NET for Android, one for iOS, one for macOS, or WinUI), but this approach then requires you to maintain a code-base for each individual family of devices.

Architecture

Before to install MAUI with Visual Studio 2022, we have to understand the MAUI architecture. So, .NET MAUI provides a single framework for building the UIs for mobile and desktop apps. The following diagram shows a high-level view of the architecture of a .NET MAUI app:

MAUI architecture - Install MAUI with Visual Studio 2022
MAUI architecture

Then, .NET MAUI apps can be written on PC or Mac, and compile into native app packages:

  • Android apps built using .NET MAUI compile from C# into 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 UIKit to the desktop, and augments it with additional AppKit 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). For more information about WinUI, see Windows UI Library.

MAUI installation preview

So, how to Install MAUI with Visual Studio 2022 preview? Remember that this post is related to Visual Studio 2022 Preview and MAUI preview. You can download Visual Studio 2022 for here.

To create .NET MAUI apps in Visual Studio, you’ll also need Visual Studio 2022 Preview 2 with the following workloads installed:

  • Mobile development with .NET
  • Universal Windows Platform development
  • Desktop development with C++
  • .NET Desktop Development
  • ASP.NET and web development (required for Blazor Desktop and the BlazorWebView control)
Visual Studio 2022 Setup – What do you have to check for MAUI

In addition, you must currently install the following Visual Studio extension to create apps that target Windows UI Library (WinUI) 3:

Then, for more information about the required workloads and components for WinUI 3 development, see Required workloads and components.

Now, to use the WebView or BlazorWebView controls on Windows you need to install the WebView2 package:

Install .NET 6 Preview

First, to verify your development environment, and install any missing components, use the maui-check utility. For acquiring and installing .NET SDKs, maui-check uses the same workload commands described in the release notes. Install the maui-check utility using the following .NET CLI command:

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

So, you have to see this screen.

Install .NET MAUI from Windows PowerShell - Install MAUI with Visual Studio 2022
Install .NET MAUI from Windows PowerShell

Then, run maui-check:

maui-check

Now, this command will open a new Windows Terminal and install all the components for MAUI. If the process finds an issue to install it, it will ask you if you want to try to fix automatically. Then, type Y and the process will install all the requirements. You have my screenshot here.

.NET MAUI installation - Install MAUI with Visual Studio 2022
.NET MAUI Installation process

Basic project with MAUI

First, when you open Visual Studio 2022 Preview, there is no option to create a MAUI project yet. So, we have to use the prompt. Open a command prompt and create a new project by running the command:

dotnet new maui -n HelloMaui

This command creates a new folder with the test application.

Folder with the MAUI project
Folder with the MAUI project

Now, open Visual Studio 2022 Preview and select Open a project or solution and select the test project you have just created.

Open a project or solution in Visual Studio 2022

The solution takes a while to open. So, the first thing I noticed is the project structure. There are 2 projects: one for Windows (WinUI) and another one for Android, iOS and macOS.

So, in HelloMaui project, there is a Platforms folder that contains the specific code for each platform. In the Resources folder, there are Fonts and Images folders. In the HelloMaiu.WinUI, you can see there are a lot of links to the HelloMaui project (for example Resources, App.xaml, MainPage.xml, Startup.cs).

MAUI Solution Explorer
MAUI Solution Explorer

Simplify development

Single project is built on top of a collection of experiences that are being simplified in .NET 6. The following list shows the experiences that will be shared in .NET MAUI single project:

  • Resources
    • Images
    • Fonts
    • App icons
    • Splash screens
    • Raw Assets
  • App manifest
  • NuGet
  • Platform-specific code

All other features are being moved from their own platform-projects into platform folders in the single project.

Startup

So, MAUI apps are bootstrapped using the .NET Generic Host. This enables apps to be initialized from a single location, and provides the ability to configure fonts, services, and third-party libraries.

Each platform has an entry point that initializes the app host builder, and then invokes the Configure method of the Startup class in your app. The Startup class can be considered the entry point for your app, and is responsible for creating a window that defines the initial page of your app.

The Startup class, which must implement the IStartup interface, must at a minimum provide an app to run:

using Microsoft.Maui;
using Microsoft.Maui.Hosting;

public class Startup : IStartup
{
    public void Configure(IAppHostBuilder appBuilder)
    {
        appBuilder
            .UseMauiApp<App>();
    }
}

The App class should derive from the Application class, and must override the CreateWindow method to provide a Window within which your app runs, and that defines the UI for the initial page of the app:

using Microsoft.Maui;
using Microsoft.Maui.Controls;

public partial class App : Application
{
    protected override IWindow CreateWindow(IActivationState activationState)
    {
        return new Window(new MainPage());
    }
}

In the example above, MainPage is a ContentPage that defines the UI for the initial page of the app.

Register fonts

Fonts can be added to your app and referenced by filename or alias. This is accomplished by invoking the ConfigureFonts method on the IAppHostBuilder object. Then, on the IFontCollection object, call the AddFont method to add the required font:

using Microsoft.Maui;
using Microsoft.Maui.Hosting;

public class Startup : IStartup
{
    public void Configure(IAppHostBuilder appBuilder)
    {
        appBuilder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Lobster-Regular.ttf", "Lobster");
            });            
    }
}

In the example above, the first argument to the AddFont method is the font filename, while the second argument represents an optional alias by which the font can be referenced when consuming it.

Any custom fonts consumed by an app must be included in your .csproj file. This can be accomplished by referencing their filenames, or by using a wildcard:

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

If you add fonts with Visual Studio, it adds them automatically.

You can use the font by referencing its name, without the file extension:

<!-- Use font name -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster-Regular" />

Alternatively, you can reference to it with an alias:

<!-- Use font alias -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster" />

Application on Android

So far, we Install MAUI with Visual Studio 2022 Preview and we understand the basis of MAUI. Now it is time to run the application and I want to start with Android.

Then, I compile the application and start an Android emulator. So, Visual Studio can run the app on it. Quite straightforward. The result is in the following image.

Run Android application- Install MAUI with Visual Studio 2022
Run the project in an Android emulator

Application on Windows

Now, it is time to run the application on Windows. The first run is not great as you can see in the following picture.

Run Windows application - lnstall MAUI with Visual Studio 2022
Run the application in Windows (UI is not great)

But, it you resize the window, the result is ok. Maybe this is something that Microsoft has to check.

Run the application in Windows
Run the application in Windows

By Enrico

My greatest passion is technology. I am interested in multiple fields and I have a lot of experience in software design and development. I started professional development when I was 6 years. Today I am a strong full-stack .NET developer (C#, Xamarin, Azure)

One thought on “Install MAUI with Visual Studio 2022”

This site uses Akismet to reduce spam. Learn how your comment data is processed.