Register DevExpress Blazor Resources

Jul 10, 2025
3 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.

Register the Namespace

_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 to register internal DevExpress Blazor services.

using DevExpress.Blazor;

/* ... */

builder.Services.AddDevExpressBlazor();

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

public static class MauiProgram{
    public static MauiApp CreateMauiApp(){
        var builder = MauiApp.CreateBuilder();

        /* ... */

        builder.Services.AddDevExpressBlazor();
        return builder.Build();
    }
}

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

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

            var services = new ServiceCollection();
            services.AddWindowsFormsBlazorWebView();
            services.AddDevExpressBlazor();
            /* ... */
        }
    }
}

/* ... */
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();
            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }
    }
}

Apply a Theme

In Blazor Web, application-wide stylesheets are stored in the Components/App.razor file. To register a theme, call the DxResourceManager.RegisterTheme(ITheme) method and pass the selected theme as a parameter.

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent)

    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
    @*...*@
</head>

@code {
    private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Dark Orchid";
        properties.Mode = ThemeMode.Dark;
        properties.AccentColor = ThemeFluentAccentColor.Orchid;
    }))

    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
    @*...*@
</head>

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

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.BlazingBerry)
    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
    @*...*@
</head>

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

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.BootstrapExternal.Clone(properties => {
        properties.Name = "Bootswatch Pulse";
        properties.AddFilePaths("css/pulse/bootstrap.min.css");
    }))
    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
    @*...*@
</head>

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

In Blazor Hybrid, application-wide stylesheets are stored in the wwwroot/index.html file. To register a theme, add stylesheet links to this file. Refer to the following help topic for more information about themes in DevExpress Blazor applications: Themes.

We recommend that you refresh cached resources on user machines to avoid rendering issues. For example, our DevExpress Blazor project template uses IFileVersionProvider:

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent)
    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
    <link href=@AppendVersion("<ProjectName>.styles.css") rel="stylesheet" />
</head>

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

Note: Blazor hybrid applications use the BlazorWebView component to render Razor markup. Since this component does not retain the browser cache between application sessions, you may omit this step. If you still wish to implement this solution, make sure that you register a theme in a Razor component.

Such techniques ensure that web browsers on user machines use the current version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.

Register Client Resources

Open the App.razor file and call the DxResourceManager.RegisterScripts method to register scripts required for DevExpress components.

Omit this step if you created a hybrid project. Our Blazor components obtain scripts for interaction automatically.

App.razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent)
    @DxResourceManager.RegisterScripts()
    @*...*@
</head>

Next Step

Read Tutorial: Add DevExpress Components to an Application

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Register the Namespace

Apply a Theme

Register Client Resources

Next Step