Add DevExpress Components to an Application

• Dec 13, 2024
• 4 minutes to read

This topic describes how to run a Blazor application and how to integrate DevExpress Blazor components into pages. Instructions for different application types and platforms are included.

Run the Application

Press F5 in Visual Studio. You can also run Blazor applications in the .NET CLI with the following commands:

Server

cd MyBlazorInteractiveServerApp
dotnet run 

WebAssembly

cd MyBlazorInteractiveWasmApp
dotnet run --project MyBlazorInteractiveWasmApp

Auto

cd MyBlazorInteractiveAutoApp
dotnet run --project MyBlazorInteractiveAutoApp

The command output contains the application URL, which can differ depending on the host:

Now listening on: http://localhost:5000

Open your browser and navigate to the URL to see the result. The following image shows the application created from the DevExpress project template:

Add Components to Blazor Web and MAUI Projects

Add DevExpress Blazor components to any .razor file and enable interactivity:

• Make sure the required interactive services are registered.

• Add an appropriate render mode attribute to a component’s page.

The following code demonstrates how to add a DxCalendar component to a Razor page:

@page "/"
@rendermode InteractiveServer 

<DxCalendar @bind-SelectedDate="@SelectedDate" />

@code{
    DateTime SelectedDate { get; set; } = DateTime.Now;
}

Add Components to Blazor WinForms and Blazor WPF Projects

Create a MyComponent.razor page in the project root. Add DevExpress Blazor components (such as DxGrid and DxButton) to this page.

MyComponent.razor

@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)
            });
    }
}

Replace the default Counter component with a component that contains DevExpress Blazor components:

Form1.cs (WinForms)

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
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);
            blazorWebView1.HostPage = "wwwroot\\index.html";
            blazorWebView1.Services = services.BuildServiceProvider();
            //blazorWebView1.RootComponents.Add<Counter>("#app");
            blazorWebView1.RootComponents.Add<MyComponent>("#app");
        }
    }
}

MainWindow.xaml (WPF)

<Window x:Class="WpfBlazorApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        xmlns:local="clr-namespace:WpfBlazorApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <!--<blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />-->
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:MyComponent}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

Included Components

For instructions on how to add an individual DevExpress Blazor component to your application, refer to the class descriptions linked below:

AI Chat Accordion Bar Gauge Button Button Group Calendar Carousel Chart CheckBox Color Palette ComboBox Context Menu Dashboard

Date Range Picker DropDown Drop-Down Button Drawer Date Edit DropDown Box File Input Flyout Form Layout Grid Grid Layout HTML Editor Layout Breakpoint

List Box Loading Panel Map Masked Input Memo Menu Message Box Pager PDF Viewer Pie Chart Pivot Grid Pivot Table (CTP) Polar Chart

Popup Progress Bar Radio RadioGroup Range Selector Reports Ribbon (CTP) Rich Text Editor Sankey Scheduler Search Box Sparkline Chart Spin Edit

Split Button Splitter Stack Layout Tabs TagBox Text Box Time Edit Toast Toolbar TreeList TreeView Upload Wait Indicator Window

Next Step

The default render mode for most DevExpress Blazor components is interactive. If your application renders content in static server-side render mode (static SSR), proceed to the following step:

Read Tutorial: Enable Interactive Render Mode