MAUI Blazor App
- 4 minutes to read
This help topic shows how to create a MAUI Blazor application and add DevExpress Blazor components to your project.
Important
Before you begin:
- Ensure your system meets these requirements.
- Use the DevExpress .NET Product Installer to install DevExpress Blazor components.
1. Create a New Project
If you are new to .NET MAUI/Blazor, please review the following Microsoft tutorial for more information: Create a .NET MAUI Blazor app.
Additional Set Up and Known Issues
iOS and MacOS require ahead-of-time compilation. You must also enable the
<UseInterpreter>property: set it totruewithin the application’s project file.<PropertyGroup> <UseInterpreter>true</UseInterpreter> </PropertyGroup>Refer to the following article for more information: Introducing the Xamarin.iOS Interpreter.
iOS or MacOS may require MacOS BigSur+.
- Configure your Blazor MAUI project to support browser developer tools.
- Configure Windows to deploy and debug MAUI applications.
- BlazorWebView is not currently in the supported browser list.
2. Install the DevExpress Blazor NuGet Package
Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
Once the dialog appears on screen, open the Browse tab, select the DevExpress 23.2 Local package source, and install the
DevExpress.BlazorNuGet package.The DevExpress 23.2 Local package is automatically added as a package source to your NuGet configuration files if you used the DevExpress .NET Product Installer.
Build the project.
3. Register DevExpress Resources
Register the
DevExpress.Blazornamespace in the _Imports.razor file:@using DevExpress.BlazorOpen the MauiProgram.cs file and add
using DevExpress.Blazor. Once added, call the AddDevExpressBlazor method and specify the BootstrapVersion global option. The option’s default value isv4. If your application uses a theme based on Bootstrap 5, set theBootstrapVersionproperty tov5./* ... */ using DevExpress.Blazor; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); /* ... */ builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5); return builder.Build(); } }Apply a theme in the wwwroot/index.html file.
You can apply a DevExpress theme. We use the DevExpress Blazing Berry theme in our documentation. To apply this theme, add a link to the theme’s stylesheet before
site.cssand<ProjectName>.styles.csslinks.If you have not implemented a way to refresh cached resources on user machines, add the asp-append-version attribute to the theme link. The attribute ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of a version cached previously. Refer to HTTP caching for more information about the browser cache.
<head> @*...*@ @* Bootstrap 5 *@ <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" asp-append-version="true"/> @* Bootstrap 4 *@ <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css" rel="stylesheet" asp-append-version="true"/> <link href="css/site.css" rel="stylesheet" /> <link href="<ProjectName>.styles.css" rel="stylesheet" /> @*...*@ </head>Refer to the following topic for more information: Themes.
The project may already contain a link to a standard or custom Bootstrap theme. In this instance, you should also add a link to the bootstrap-external stylesheet (v4 or v5). This stylesheet applies CSS variables from Bootstrap CSS files to DevExpress Blazor components.
<head> @*...*@ @* Bootstrap theme *@ <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> @* bootstrap-external for Bootstrap 5 *@ <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" /> @* bootstrap-external for Bootstrap 4 *@ <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" /> @*...*@ </head>
4. Add DevExpress Blazor Components
Add DevExpress Blazor components to a Razor page (for example, to Index.razor). The code below adds the DxGrid and DxButton components to the Index.razor page.
@page "/"
@using System.Collections.ObjectModel
<DxButton Text="Add New Day"
Click="(e) => AddNewForecast()" />
<p />
<DxGrid Data="@WeatherForecastData">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" />
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
<DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" />
</Columns>
</DxGrid>
@code {
public class WeatherForecast {
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
public string Forecast { get; set; }
public string CloudCover { get; set; }
public bool Precipitation { get; set; }
}
int DayCount { get; set; } = 0;
ObservableCollection<WeatherForecast> WeatherForecastData { get; set; }
static readonly Random Rnd = new Random();
protected override void OnInitialized() {
WeatherForecastData = new ObservableCollection<WeatherForecast>();
foreach (var date in Enumerable.Range(1, 5).Select(i => DateTime.Now.Date.AddDays(i))) {
AddNewForecast();
}
}
void AddNewForecast() {
WeatherForecastData.Add(new WeatherForecast() {
Date = DateTime.Now.Date.AddDays(++DayCount),
TemperatureC = Rnd.Next(10, 20)
});
}
}
5. Run the application
DevExpress MAUI Components
You can also embed Blazor components into a .NET MAUI application instead of a Hybrid hosting model. Decide whether you need Blazor, the MAUI component suite, or both. Refer to the following section for more information on how to use DevExpress .NET MAUI controls: Get Started with DevExpress Controls for .NET Multi-platform App UI.
