How To: Create a Custom Blazor Application Template

• Mar 05, 2026
• 8 minutes to read

This article explains how to create and use a custom Main Form Template instead of the Application Window Template in an XAF ASP.NET Core Blazor application.

XAF applications created in the Template Kit use a DxAccordion or DxTreeView navigation component. The custom template described in this topic uses the DxMenu navigation component.

View Example: XAF Blazor - How to create a custom template

Implementation Details

1. In the Solution Explorer , navigate to the YourSolutionName.Blazor.Server project and create the Templates folder.

2. Create a custom Action control that displays a custom navigation component. Right-click the Templates folder, select the Add | Class… option from the context menu, and set the name of the new class to CustomShowNavigationItemActionControl.cs. Implement the ISingleChoiceActionControl interface in the newly created class. Set the wrapped Action’s ActionId property to ShowNavigationItem.

3. Create a custom Razor component that renders the DxMenu component. Right-click the Templates folder, select the Add | Razor Component option from the context menu, and set the new component’s name to CustomShowNavigationItemActionControlComponent.razor. Replace the autogenerated file content with the following code:

4. Create a new Main Form Template. Right-click the Templates folder and select the Add | New Item… option from the context menu. In the invoked dialog, select DevExpress 25.2 Template Kit , specify CustomMainFormTemplate.cs as new item name, and click Add. In the Template Kit, navigate to the XAF Blazor Templates section, select the Main Form Template item, and click ADD ITEM.

5. In the CustomMainFormTemplate class, replace the built-in ShowNavigationItemActionControl with the newly created CustomShowNavigationItemActionControl:

6. Modify the CustomMainFormTemplateComponent.razor component. Remove the reference to the built-in ShowNavigationItemActionControl or replace it with CustomShowNavigationItemActionControl. You can see an example in the following code snippet:

7. Override the CreateDefaultTemplate method in the YourApplicationName.Blazor.Server\BlazorApplication.cs file to use an instance of the new template:

8. Run the application. XAF now renders the navigation control as a drop-down menu.

Note

If you want to change the template appearance or behavior of the inner tab control that contains a View (List View in this case), customize the Main Form Template.