Back to Devexpress

Display and Customize the Ribbon UI in an XAF Blazor Application

expressappframework-405643-ui-construction-templates-in-blazor-display-and-customize-ribbon-in-blazor-app.md

latest2.1 KB
Original Source

Display and Customize the Ribbon UI in an XAF Blazor Application

  • Apr 01, 2026
  • 3 minutes to read

An XAF Core Blazor application can display the standard Toolbar UI or Ribbon UI. If you create a new application, XAF sets the UI type to Ribbon.

Ribbon UI

Standard UI

Display the Ribbon UI in an Existing Application

In the Solution Explorer , expand the MySolution.Blazor.Server project and double-click the Model.xafml file to open it in the Model Editor. Navigate to the Options node and set the FormStyle property to Ribbon.

Customize the Ribbon UI

An XAF application builds the Ribbon UI structure based on the model specified in the Model Editor. You can customize the default Ribbon structure as follows:

  1. In the Solution Explorer , expand the MySolution.Blazor.Server project and double-click the Model.xafml file to open it in the Model Editor.
  2. Navigate to the Action Design | ActionToRibbonMapping node.

Access the DxRibbon Component

  1. Under the SolutionName.Blazor.Server project, add a Window Controller to the Controllers folder.
  2. Override the OnActivated method as demonstrated in the following code snippet:

See Also

Customize Action Containers in Ribbon UI