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