Hybrid Application with MAUI Blazor Integration

Bringing together .NET MAUI and Blazor technologies is rapidly becoming popular in the world of modern hybrid application development. Thanks to MAUI Blazor integration, both mobile and desktop applications can be built with a single codebase using C# and HTML/CSS. This not only enhances the developer experience, but also allows projects to be realized much faster. In this article, we address the key points you need to know about MAUI Blazor integration, sample project setup, and the advantages you may encounter, step by step.

What is MAUI Blazor Integration?

MAUI Blazor integration refers to the combination of .NET Multi-platform App UI (MAUI) with Blazor web technologies. Thus, developers can create powerful and flexible hybrid applications by combining Blazor's component-based web development approach with MAUI's cross-platform capabilities. In a MAUI Blazor project, you can manage HTML, CSS, and C# codes all in one place and develop natively looking applications that run on Android, iOS, Windows, and macOS.

Creating a MAUI Blazor Project

Starting the Project

If you have .NET 6 or a newer SDK, you can quickly start a MAUI Blazor application via the command line:

dotnet new maui-blazor -n MyHybridApp

Basic File Structure

The main files to note in a project created with MAUI Blazor integration are as follows:

• MainPage.xaml: Contains the application's main shell structure.
• MainPage.xaml.cs: The code-behind C# file.
• wwwroot: The folder where static web files for Blazor are stored.

Using BlazorWebView

The main structure that displays Blazor components is BlazorWebView. For example, your MainPage.xaml file might look like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             x:Class="MyHybridApp.MainPage">
    <blazor:BlazorWebView HostPage="wwwroot/index.html" />
</ContentPage>

Advantages of MAUI Blazor Integration

• Cross Platform: You can develop applications that feel native on both mobile and desktop with a single codebase.
• Reuse of Web Components: You can directly use your existing Blazor components in your mobile or desktop projects.
• Rapid Development: Fast interface development is possible with C#, HTML, and CSS.

Conclusion

MAUI Blazor integration offers a modern and practical hybrid app experience. Thanks to a single code base and the powerful .NET ecosystem, you can build high-quality applications regardless of the platform. If you have previously used Blazor, you can quickly create rapid prototypes with MAUI Blazor projects. As shown with code samples, the integration and development steps are quite simple. MAUI Blazor integration perfectly adapts to the multi-platform application development trends of the future.