Start with MAUI

It is time to start with MAUI! After the Release Candidate from yesterday, we can update Visual Studio 2022 Preview to play with Multi-platform App UI (MAUI).

Install Visual Studio 2022 Preview

So, the first thing you have to do is download the Visual Studio 2022 Preview installer from the Microsoft website. Then, click on Mobile development with .NET and verify if .NET MAUI (Preview) is checked.

Now, sit back and relax waiting for the installation. So, shall we start with MAUI?

Create the first project

Good! Now, open Visual Studio 2022 Preview and click on Create a new project.

Immediately at the top of the list, you have the new templates for .NET MAUI. I select the first one .NET MAUI App (Preview).

Few seconds later, the application is ready!

The first thing I see is that finally there is only one folder for the platforms. The code for Windows is finally here. In the first version of MAUI there was a different project for Windows app.

Under Platforms folder, there is the specific code for each single platform. So, if you are going to build an Android application, you can see there is an AndroidManifest.xml for the specific configuration in Android. Those are just C# projection of the native platform classes. If you have a specific code for Android, you can add your class directly in that folder and the code will be compiled only for this specific platform.

Then, the Resources folder. Here you collect images, fonts or raw files. Raw files are any raw assets you want to be deployed with your application and given a Build Action of MauiAsset.

These files will be deployed with you package and will be accessible using Essentials:

async Task LoadMauiAsset()
{
    using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
    using var reader = new StreamReader(stream);

    var contents = reader.ReadToEnd();
}

One important thing to say is the namespace Microsoft.Maui.Essentials Updates doesn’t exists any more. It is replaced with more intuitive namespaces like Microsoft.Maui.ApplicationModel, Microsoft.Maui.ApplicationModel.Communication and so on. The full list is available on GitHub.

Under Resources, you can also create a Styles folder to organize the styles for your application.

Edit project

Now, if you want to inspect or edit the project file, double-click on the project name in the Solution Explorer.

First this I noticed is the Target Frameworks. Those are all the framework the application supports.

<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>

If you strip out, for example, net6.0-ios the project for iOS won’t be compiled. Then, the TargetFrameworks Condition for Windows. If someone is talking about TFM (Target Framework Monitors), they refer to this one.

<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>

Those 2 lines tell that we want to use MAUI and the code is in a single project. Those bring the MAUI dependecies in my project and enable the single features in the project (like Fonts and Images).

MauiProgram

Now, all the application starts from the App.xaml.cs class but in MauiProgram.cs there is the common configuration and is very simple

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

		return builder.Build();
	}
}

The code in line 7, tells that we want to use MAUI and then the fonts we want to use across the application.