Register DevExpress Blazor Resources

• Aug 30, 2024
• 4 minutes to read

This topic describes how to integrate DevExpress Blazor resources into various project types: how to set up namespaces, add and configure DevExpress Blazor services, and apply themes. The topic also describes specific settings for different .NET framework versions.

Watch Video: Adding DevExpress Blazor Components to an Existing Project (.NET 8)

Register the Namespace

Register the DevExpress.Blazor namespace in the _Imports.razor file:

_Imports.razor

@using DevExpress.Blazor

Add using DevExpress.Blazor; to one of the following files based on the project type:

• Server and WASM: Program.cs
• Blazor MAUI: MauiProgram.cs
• Blazor WinForms: Form1.cs
• Blazor WPF: MainWindow.xaml.cs

In the same file, call the AddDevExpressBlazor method and specify the BootstrapVersion global option. The option’s default value is v4. If your application uses a theme based on Bootstrap 5, you should set the BootstrapVersion property to v5.

Program.cs (Blazor Web App)

using DevExpress.Blazor;

/* ... */

builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);

MauiProgram.cs (MAUI)

/* ... */
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();
    }
}

Form1.cs (WinForms)

/* ... */
using DevExpress.Blazor;

namespace WinFormsBlazorApp1 {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();

            var services = new ServiceCollection();
            services.AddWindowsFormsBlazorWebView();
            services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
            /* ... */
        }
    }
}

MainWindow.xaml.cs (WPF)

/* ... */
using DevExpress.Blazor;
using Microsoft.Extensions.DependencyInjection;

namespace WpfBlazorApp1 {
    /* ... */

    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            var serviceCollection = new ServiceCollection();
            serviceCollection.AddWpfBlazorWebView();
            serviceCollection.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);
            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }
    }
}

Apply a Theme

Application-wide stylesheets are stored in one of the following files based on the framework version and application template used:

• Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
• Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
• wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
• Components/App.razor for Blazor Web applications in .NET 8

Add a link to your theme to one of these layout files (see sections below for examples).

If you do not implement any solutions to refresh cached resources on user machines, inject the IFileVersionProvider interface in the layout file. If you did not create the project from the DevExpress template, you also need to add the corresponding service in the Program.cs file:

builder.Services.AddMvc();

The interface ensures that web browsers on user machines use the actual version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.

Built-In DevExpress Theme

You can link one of the built-in DevExpress themes. We use the DevExpress Blazing Berry theme in our documentation. To apply this theme, add a link to a stylesheet before the site.css or app.css and <ProjectName>.styles.css links.

Blazing Berry

@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
@* ... *@
<head>
    @*...*@
    @* Bootstrap 5 *@
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
    @* Bootstrap 4 *@
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css") rel="stylesheet" />
    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
    @*...*@
</head>

@* .NET 8 *@
@code {
    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
@* .NET 6 *@
@{
    string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}

External Bootstrap Theme

You can apply an external Bootstrap theme. Add a link to your theme and bootstrap-external stylesheet (v4 or v5) to apply CSS variables from Bootstrap CSS files to DevExpress Blazor components. Note that the project may already contain a link to the standard or custom Bootstrap theme.

@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
@* ... *@
<head>
    @*...*@
    @* Bootstrap theme *@
    <link href=@AppendVersion("css/bootstrap/bootstrap.min.css") rel="stylesheet" />
    @* bootstrap-external for Bootstrap 5 *@
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css") rel="stylesheet" />
    @* bootstrap-external for Bootstrap 4 *@
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css") rel="stylesheet" />
    @*...*@
</head>

@* .NET 8 *@
@code {
    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
@* .NET 6 *@
@{
    string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}

Settings Specific to the Framework Version

Specify the following settings based on your application’s framework version.

.NET 8

Register scripts required by DevExpress components: open the App.razor file and call the DxResourceManager.RegisterScripts method.

App.razor

<head>
    @*...*@
    <link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
    @DxResourceManager.RegisterScripts()
    @*...*@
</head>

.NET 6 and .NET 7

Blazor Server only. Call the UseStaticWebAssets method on the host builder in the Program.cs file to enable the application to load client-side resources. Refer to the following topic for details: Static files in non-Development environments for Blazor Server apps.

Program.cs

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

Blazor WebAssembly only. If you enabled the ASP.NET Core hosted option when you created the project, make sure that the server-side project is set as the solution’s startup project.

Next Step

Read Tutorial: Add DevExpress Components to an Application