Building Cross-Platform Applications with .NET MAUI/

...

/

Working with Blazor MAUI Project Templates

Working with Blazor MAUI Project Templates

Learn how to incorporate Blazor in a .NET MAUI app.

We'll cover the following...

The easiest way to integrate Blazor WebAssembly with .NET MAUI is to use the Blazor .NET MAUI project template. Such a template is used in the code playground below. We'll go through the project structure to get familiar with how Blazor components can be added to an MAUI app.

<?xml version="1.0" encoding="UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiBlazorApp"
             x:Class="MauiBlazorApp.App">
    <Application.Resources>
        <ResourceDictionary>

            <Color x:Key="PageBackgroundColor">#512bdf</Color>
            <Color x:Key="PrimaryTextColor">White</Color>

            <Style TargetType="Label">
                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
                <Setter Property="FontFamily" Value="OpenSansRegular" />
            </Style>

            <Style TargetType="Button">
                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
                <Setter Property="FontFamily" Value="OpenSansRegular" />
                <Setter Property="BackgroundColor" Value="#2b0b98" />
                <Setter Property="Padding" Value="14,10" />
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>
.NET MAUI project with Blazor UI

Blazor project structure

This project represents a mixture of Blazor components and .NET MAUI components. We'll focus on the components specific to Blazor.

Any Blazor WebAssembly application will be hosted inside a standard HTML page. It will also be able to interoperate with standard web front-end components, such as CSS and JavaScript. We have all these components inside the wwwroot folder of the project.

The favicon.ico file inside the folder represents the icon that will be displayed in a web browser tab. The css folder contains various style sheets. The index.html file ...