How to Add an Unbound Control (Button) to the Form Layout in an XAF View (with a Built-in ControlViewItem)

• Feb 02, 2026
• 4 minutes to read

This article describes how to add a custom control to a Detail View. Use this approach when you need to place a custom control near a particular editor in a Detail View and the Action Container View Item method is not suitable (this method does not allow data access from the current view object).

Implementation Considerations

This suggested implementation requires minimal coding. Use it when you want to add an existing or custom control to the client area of a Detail View or Dashboard View. This approach allows you to obtain data from the current View object if necessary. Your control can be unbound or can load data from external sources.

If you want to bind a control to a business class property and need to add the control to both List View and Detail View, then consider the custom Property Editor approach.

This approach also does not imply complex user interactions between the UI control and an XAF View. You can implement a custom ViewController if you require custom logic. A custom UI control may implement advanced user interaction.

ASP.NET Core Blazor

1. Navigate to the ASP.NET Core Blazor application project (SolutionName.Blazor.Server) and create an Editors folder.

2. In the Editors folder, create a Razor component and name it ButtonComponent.razor.

3. In this component, configure the DxButton component:

4. Right-click the Razor file to access its properties and make sure that the Build Action property is set to Content.

5. Add the component to a Detail View. Open the Model Editor and navigate to the Views | SolutionName.Module.BusinessObjects | <Class> | <Class>_DetailView | Items node. Right-click the node and select Add | ControlDetailItem from the context menu options.

6. Specify the Razor component’s full type name in the ControlTypeName property: SolutionName.Blazor.Server.Editors.ButtonComponent.

7. Navigate to the Views | SolutionName.Module.BusinessObjects | <Class> | <Class>_DetailView | Layout node. Right-click the layout area and select the Customize Layout option from the context menu. Drag the new View Item from the Customization: <Class> window to the layout area.

8. Run the application and navigate to the required Detail View. Click the Click Me! button. A toast notification should appear:

Windows Forms

1. Navigate to the MySolution.Win project and open the Model.xafml file. In the Model Editor, navigate to the Views | MySolution.Module.BusinessObjects | <Class> | <Class>_DetailView | Items node. Right-click the node and select ControlDetailItem from the Add context menu.

2. Set the IModelControlDetailItem.ControlTypeName property of the newly created node to System.Windows.Forms.Button. Set the Id property to MyButton and IModelViewItem.Caption to My Button.

3. Navigate to the Views | MySolution.Module.BusinessObjects | <Class> | <Class>_DetailView | Layout node. Right-click the layout area and select the Customize Layout option from the context menu. Drag the new View Item from the Customization: <Class> window to the layout area.

4. Run the application and navigate to the Detail View. The new Action should be available in the UI:

5. To handle the Action’s Click event, add a new Controller to the MySolution.Win project and replace the automatically generated code:

6. Run the application. Navigate to the required Detail View and click the button. The following message should appear:

See Also

How to Add an Unbound Control (Button) to the Form Layout in an XAF View (with a Built-in ActionContainerViewItem)

How to Add an Unbound Control (Button) to the Form Layout in an XAF View (with a Fully Custom ViewItem)

How to: Show a Custom Data-Bound Control in an XAF View