Blazor — Hybrid Support (v22.2)

Our most recent release (v22.2) ships with Blazor Hybrid support (Community Tech Preview - CTP). As such, you can now embed DevExpress Blazor UI components into native MAUI, WinForms, and WPF Blazor applications.

Hybrid applications have the following advantages:

• They combine web/native technologies and take advantage of associated benefits.
• They allow you to reuse code and components across different hosting models and multiple platforms. When used, mobile, desktop, and web applications will look/work in a similar fashion.

You can easily set up your Hybrid project to use DevExpress Blazor components – simply use standard Microsoft templates to create your project, then add DevExpress resources to it. The code you write to configure DevExpress components is not dependent on the hosting model. For more information on how to embed components, please review the following step-by-step tutorials:

• MAUI (supported platforms: Android, iOS, macOS, Windows)
• WinForms
• WPF

In the following section, I’ll show you how to create a .NET MAUI Blazor app with our Blazor UI components.

1. To begin, launch Visual Studio and use the .NET MAUI Blazor App template to create a project.

   

   Before you proceed to step #2, be sure to review the following help topic: Additional Set Up/Known Issues.

2. Install the DevExpress Blazor NuGet package.

   

3. Register DevExpress resources:

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

      @using DevExpress.Blazor

   2. Open the MauiProgram.cs file and add using DevExpress.Blazor. Once complete, call the AddDevExpressBlazor method and specify the global BootstrapVersion option:

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

   3. Apply the DevExpress Blazing Berry theme in the wwwroot/index.html file.

      @*...*@
      <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" 
      	rel="stylesheet" asp-append-version="true"/> 
      <link href="css/site.css" rel="stylesheet"/> 
      <link href="<projectname>.styles.css" rel="stylesheet"/> 
      @*...*@ 

4. Add DevExpress Blazor components to a Razor page (for example, to Index.razor). The following code adds our 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 in the Android Emulator.

   

Your Feedback Counts

As always, we appreciate your feedback. Please take a moment to answer the following survey question:

Free DevExpress Products - Get Your Copy Today