.NET MAUI Blazor Hybrid app with MudBlazor
This article shows you how to build and run a .NET MAUI Blazor Hybrid app with MudBlazor.
What’s MudBlazor?
MudBlazor is an open-source UI component library for Blazor applications. Provides a set of reusable and customizable components that developers can use to create modern and responsive user interfaces in their Blazor projects. These components include buttons, forms, dialogs, data grids, and more. MudBlazor aims to simplify the development process by offering a wide range of pre-built components with built-in styling and functionality, making it easier for developers to create consistent and visually appealing applications.
What’s .NET MAUI Blazor Hybrid?
.NET MAUI is a framework for building cross-platform applications, and Blazor is a web framework for building interactive web applications using C# and .NET. A .NET MAUI Blazor Hybrid app combines the power of both technologies, allowing developers to create applications that can run on multiple platforms, including Windows, macOS, iOS, and Android.
Getting Started
Installation
1. Create a .NET MAUI Blazor Hybrid app project in Visual Studio, call it MauiAppWithMudBlazor
2. Getting started with MudBlazor, install the package to add MudBlazor to the project
Install-package MudBlazor3. After the package is added, you need to add the following in your _Imports.razor
@using MudBlazor4. Add font and style references to your HTML head section in index.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />5. In the same file, add script reference
<script src="_content/MudBlazor/MudBlazor.min.js"></script>6. Bootstrap is not necessary, remove the Bootstrap references from the index.html
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />7. Also remove the Bootstrap folder from your project.
8. Register Services, add the following in MauiProgram.cs
using MudBlazor.Services;
builder.Services.AddMudServices();Add first MudBlazor component
1. Add basic Layout to your MainLayout.razor, ThemeProvider component is essential for MudBlazor
@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="0">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
<MudSpacer />
<MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/arbems/.NET-MAUI-Blazor-Hybrid-app-with-MudBlazor" Target="_blank" />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="1">
<MudDrawerHeader>
<MudText Typo="Typo.h6">MyApplication</MudText>
</MudDrawerHeader>
<NavMenu />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Large" Class="my-5 pt-5">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
@code {
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}2. Update NavMenu.razor our navigation Menu
<MudNavMenu>
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
<MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
<MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
</MudNavMenu>3. Update Home.razor
@page "/"
<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor!</MudText>
<MudAlert Severity="Severity.Normal">You can find documentation and examples on our website here: <MudLink Href="https://mudblazor.com" Typo="Typo.body2" Color="Color.Inherit"><b>www.mudblazor.com</b></MudLink></MudAlert>
4. Update Counter.razor
@page "/counter"
<PageTitle>Counter</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Counter</MudText>
<MudText Class="mb-4">Current count: @currentCount</MudText>
<MudButton Color="Color.Primary" Variant="Variant.Filled" @onclick="IncrementCount">Click me</MudButton>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
5. Update Weather.razor
@page "/weather"
<PageTitle>Weather forecast</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
@if (forecasts == null)
{
<MudProgressCircular Color="Color.Default" Indeterminate="true" />
}
else
{
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
<HeaderContent>
<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Date">@context.Date</MudTd>
<MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
<MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
<MudTd DataLabel="Summary">@context.Summary</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="new int[]{50, 100}" />
</PagerContent>
</MudTable>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate a loading indicator
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
6. Now, you have the first components of MudBlazor, can run the application and see the result on multiple platforms, including Windows, macOS, iOS, and Android.
Run in Android emulator
1. To run the application in Android emulator from visual studio, make sure you have the necessary versions of Android installed. Go to “Tools” > “Android SDK Manager”.
2. Create a new emulator or use an existing one, Go to “Tools” > “Android Device Manager”
3. After configuring the emulator, in the Visual Studio toolbar, select the emulator or device on which you want to run the application.
Run from a physical Android device
1. Enable USB debugging on the device:
- On your Android device, go to “Settings” > “About Phone” and repeatedly tap the build number until the message “You are now a developer” appears.
- In the developer options, enable “USB Debugging”.
2. Using a USB cable, connect your Android device to your computer.
3. On the device, you may be asked to accept the USB connection and allow debugging.
4. And finally, in Visual Studio, select the connected Android device as the execution target before starting debugging.
Run from an IOS device
Developing and running iOS apps from a Windows machine has limitations due to Apple restrictions and available tools. Running an app on iOS from Visual Studio on a Windows machine can be a little more complicated. However, you can set up a remote build environment with a Mac for testing and debugging on an iOS device.
Sample code
.NET MAUI Blazor Hybrid app with MudBlazor
