Bootstrap Blazor enterprise-level UI component library

MAUI Blazor Installation tutorial

Environmental preparation

Make sure the system is installed

visual studio 2022 17.3.0 Version
net6

Create a project with Visual Studio

Step 1. Create a project

1.Visual Studio 2022

2. Create a new project

3. choose .NET MAUI Blazor application and click Next step, Choose a name and location for the project, then click Next step, create

Step 2. Add the BootstrapBlazor component to the existing project

1. Search BootstrapBlazor through the nuget.org source

Right click on the project in the solution and select Manage Nuget Packages

dotnet add package BootstrapBlazor --version 7.2.5-beta02

2. Install the BootstrapBlazor package

3. Add stylesheet file

Add a theme style sheet to the host file

~/wwwroot/index.html

Tips

Please remove the default Bootstrap style link <link rel='stylesheet' href='css/bootstrap/bootstrap.min.css' />; The icon of this project uses the FontAwesome icon library. Please refer to yourself or get the BootstrapBlazor.FontAwesome nuget package

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

4. Add the Javascript file

~/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>

5. Register the BootstrapBlazor service

MauiProgram.cs

MauiProgram.cs

var builder = MauiApp.CreateBuilder();

builder.Services.AddMauiBlazorWebView();

// CodeComment
builder.Services.AddBootstrapBlazor();

return builder.Build();

6. Add namespace reference

Add the following to ~/_Imports.razor file so that Razor Components are recognized in the file

@using BootstrapBlazor.Components

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

The last step is to use in the page BootstrapBlazor component and run it in the browser. E.g

1. Add one to the page Button button

<Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="test" />

2. In Visual studio 2022 middle F5 run the application

Mixed modes using both Razor and Xaml

1. Pages folder add a file named NativeContent.xaml The MAUI ContentView control file

NativeContent.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";
    }
}

2. Revise 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();
    }
}

exist Visual studio 2022 middle F5 run the application