MAUI Blazor Installation tutorial
Environmental preparation
Make sure the system is installed
visual studio 2022 17.3.0
Versionnet6
Create a project with Visual Studio
Step 1. Create a project

Step 2. Add the BootstrapBlazor component to the existing project
BootstrapBlazor
through the nuget.org sourcedotnet add package BootstrapBlazor --version 7.2.5-beta02


~/wwwroot/index.html
<head>
...
<!-- Need to reference BootstrapBlazor.FontAwesome package !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
...
<link href="css/app.css" rel="stylesheet">
<link href="MauiApp1.styles.css" rel="stylesheet">
</head>
~/wwwroot/index.html
<body>
...
<!-- add code !-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
...
<script src="_framework/blazor.webview.js" autostart="false" ></script>
</body>
MauiProgram.cs
var builder = MauiApp.CreateBuilder();
builder.Services.AddMauiBlazorWebView();
// CodeComment
builder.Services.AddBootstrapBlazor();
return builder.Build();
~/_Imports.razor
file so that Razor
Components are recognized in the file@using BootstrapBlazor.Components
BootstrapBlazorRoot
component to ~/Main.razor
in file<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<PageTitle>Title</PageTitle>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>under development ...</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
Step 3. Use components in the page
BootstrapBlazor
component and run it in the browser. E.gButton
button<Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="test" />

Mixed modes using both Razor and Xaml
NativeContent.xaml
The MAUI ContentView control fileNativeContent.xaml
<ContentView
x:Class="MauiApp1.Pages.NativeContent"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<VerticalStackLayout
Padding="30,0"
Spacing="25"
VerticalOptions="Center">
<Image
HeightRequest="200"
HorizontalOptions="Center"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
Source="dotnet_bot.png" />
<Label
FontSize="32"
HorizontalOptions="Center"
SemanticProperties.HeadingLevel="Level1"
Text="Hello, World!" />
<Label
FontSize="18"
HorizontalOptions="Center"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
SemanticProperties.HeadingLevel="Level2"
Text="Welcome to .NET Multi-platform App UI" />
<Button
x:Name="CounterBtn"
Clicked="OnCounterClicked"
HorizontalOptions="Center"
SemanticProperties.Hint="Counts the number of times you click"
Text="Click me" />
</VerticalStackLayout>
</ContentView>
NativeContent.xaml.cs
public partial class NativeContent : ContentView
{
public NativeContent()
{
InitializeComponent();
}
int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
}
}
MainPage.xaml
in the file ContentPage
for TabbedPage
(You can also use NavigationPage
and other navigation components)MainPage.xaml
<TabbedPage
x:Class="MauiApp1.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
xmlns:pages="clr-namespace:MauiApp1.Pages"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<ContentPage Title="Home">
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent ComponentType="{x:Type pages:Index}" Selector="#app" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
<ContentPage Title="NativeContent">
<pages:NativeContent />
</ContentPage>
<ContentPage Title="Counter">
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent ComponentType="{x:Type pages:Counter}" Selector="#app" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
<ContentPage Title="Weather">
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent ComponentType="{x:Type pages:FetchData}" Selector="#app" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
</TabbedPage>
MainPage.xaml.cs
public partial class MainPage : TabbedPage
{
public MainPage()
{
InitializeComponent();
}
}
