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.
Update: I create a new post Install MAUI with Visual Studio 2022 (Preview) after Microsoft released Visual Studio 2022 and a new preview of MAUI.
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 121: M365 Admin App: A Customer .NET MAUI Migration Story – The .NET MAUI Podcast
Table of contents
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 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:
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
BlazorWebViewcontrol)
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.
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.
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.
Now, open Visual Studio 2022 Preview and select Open a project or solution and select the test project you have just created.
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).
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.
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.
But, it you resize the window, the result is ok. Maybe this is something that Microsoft has to check.
One thought on “Install MAUI with Visual Studio 2022”