Moving to .NET MAUI

With the .NET unification, Xamarin has become a part of the .NET platform, and Xamarin.Forms integrates with .NET in the form of .NET MAUI.

.NET MAUI is a first-class .NET citizen with the Microsoft.Maui namespace.

Making the move to .NET MAUI is also an opportunity for Microsoft to redesign and rebuild Xamarin.Forms from the ground up and tackle some of the issues that have been lingering at a lower level. Compared to Xamarin.Forms, .NET MAUI uses a single project structure, supports hot reloads better, and supports MVU and Blazor development patterns.

From Figure 1.2, we can see that there is a common BCL for all supported operating systems. Under the BCL, there are two runtimes, WinRT and the Mono Runtime, according to the platform. For each platform, there is a dedicated .NET implementation to provide full support for native application development.

Figure 1.2: .NET MAUI architecture

Comparing to Xamarin.Forms, we can see from Table 1.5, there are many improvements in .NET MAUI.

.NET MAUI uses a single project structure to simplify project management. We can manage resources, dependency injection, and configurations in one location instead of managing them separately per platform.

.NET MAUI is fully integrated as part of .NET, so we can create and build projects using the .NET SDK command line. In this case, we have more choices in terms of development environments.

	.NET MAUI	Xamarin.Forms
Project structure	Single project	Multiple projects
Resource management	One location for all platforms	Managed per platform
Fully integrated with .NET	Namespace in Microsoft.Maui and other IDEs can be chosen beside Visual Studio. Command-line support. We can create, build, and run in a console: dotnet new maui dotnet build -t:Run -f net6.0-android dotnet build -t:Run -f net6.0-ios dotnet build -t:Run -f net6.0-maccatalyst	Namespace in Xamarin.Forms and it uses Visual Studio as an IDE
Design improvement	Configuration through .NET Generic Host Dependency injection support	Configuration scattered in different locations
MVU pattern	A modern type of UI implementation	No
Blazor Hybrid	Support through BlazorWebView	No

Table 1.5: .NET MAUI improvement

In Table 1.5, we can see that .NET MAUI supports application configuration using .NET generic host, can work with multiple IDE environments, supports dependency injection, and can use the MVVM toolkit, etc. It also supports the MVU pattern and Blazor Hybrid UI. Next, we will look at the Blazor Hybrid app.

.NET MAUI Blazor apps

In Table 1.4, where we compared the user interface design options on different platforms, we mentioned that there is another way to design cross-platform user interfaces in .NET MAUI, which is Blazor.

Released in ASP.NET Core 3.0, Blazor is a framework for building an interactive client-side web UI with .NET. With .NET MAUI and Blazor, we can build cross-platform apps in the form of Blazor Hybrid apps. This way, the boundary between a native application and a web application becomes blurred. .NET MAUI Blazor Hybrid apps enable Blazor components to be integrated with native platform features and UI controls. The Blazor components have full access to the native capabilities of a device.

The way to use the Blazor web framework in .NET MAUI is through a BlazorWebView component. .NET MAUI Blazor enables both native and web UIs in a single application, and they can co-exist in a single view. With .NET MAUI Blazor, applications can leverage the Blazor component model (Razor components), which uses HTML, CSS, and the Razor syntax. The Blazor part of an app can reuse components, layouts, and styles that are used in an existing regular web app. BlazorWebView can be composed alongside native elements; additionally, they leverage platform features and share states with their native counterparts.

Choosing XAML versus Razor in .NET MAUI

To design the user interface of your .NET MAUI application, you have a few choices for implementation:

• XAML: Implement user interface in XAML that is only similar to Xamarin.Forms. We can also choose the MVU pattern to use C# code to create and style UI elements directly. No matter whether you choose XAML or C# code directly, the underlying implementation is the same.
• Blazor: Implement a user interface in Razor Pages, which is similar to web application development.
• Blazor Hybrid app: Use both XAML and Razor Pages in your application.

It’s your decision how you want to design your application. You can choose one of the preceding options or mix XAML and the Blazor UI according to the best fit. To develop Blazor Hybrid apps, you should be able to use most of the existing Blazor libraries directly. Blazor provides good JavaScript interoperability, and you can use your favorite JavaScript library in your development.