Search⌘ K
AI Features
Home
Courses
Building Cross-Platform Applications with .NET MAUI

Working with Blazor MAUI Project Templates

Explore how to work with Blazor .NET MAUI project templates to combine Blazor WebAssembly and MAUI components. Learn project structure, the role of BlazorWebView, and how to host Blazor UI within a native application for cross-platform development.

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 ...