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

Dec 18, 2025
4 minutes to read

XAF allows you to place an Action in a View instead of a toolbar.

In the image below, the “My Simple Action” button is an Action displayed in a Detail View.

Implementation Considerations

This is the simplest approach that requires minimal coding. If you have an existing Controller and Action, then no code is necessary. Use this method when you want to add a simple button, a drop-down button, a pop-up menu, or an input box to the client area of a Detail View or Dashboard View.

This approach relies on the standard XAF Action and Controller events for user interaction and does not require obtaining data from the current View object.

Step 1. Create a new Action

In the MySolution.Module project, add a new class to the Controllers folder. Replace its content with the following code:

CS\MainDemo.Module\Controllers

csharp

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using MainDemo.Module.BusinessObjects;

namespace MainDemo.Module.Controllers {
    public class MyViewController : ViewController {
        public MyViewController() {
            TargetViewType = ViewType.DetailView;
            TargetObjectType = typeof(Employee);

            SimpleAction mySimpleAction = new SimpleAction(this, "MySimpleAction", "MyCategory") {
                Caption = "My Simple Action",
                ConfirmationMessage = "My Simple Action Shows a Message",
            };
            mySimpleAction.Execute += MySimpleAction_Execute;
        }
        private void MySimpleAction_Execute(Object sender, SimpleActionExecuteEventArgs e) {
            // ...
        }

    }
}

Rebuild your project.

Step 2. Place a New Action in a Detail View

In the MainDemo.Module project, open the Model.DesignedDiffs.xafml file. If the Model Editor is already open, restart it and navigate to the Views node.
In the Views node, navigate to the Detail View where you want to display the action. Invoke the context menu to add a new ActionContainerViewItem child node to the Detail View’s items node.
Set the newly created node’s Id property to MyActionContainer and the ActionContainer property to MyCategory.
Select the Detail View’s Layout node. In the layout designer, right-click the empty space and invoke the layout customization dialog and drag the newly created control from the list of hidden items to the layout.
Run the application. The Action button is visible in the required Detail View:

Step 3. Customize an Action in the Layout (Optional)

Handle the Action.CustomizeControl event to customize Action controls.

The following code samples demonstrate how to:

Render an Action button in the primary style of the current theme in an ASP.NET Core Blazor application.
Remove paddings and adjust an Action button size to match an input text box size in a Windows Forms application.
(Blazor) CS\MainDemo.Blazor.Server\Controllers
(WinForms) CS\MainDemo.Win\Controllers

csharp

using DevExpress.Blazor;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.ExpressApp.Blazor.Templates.Toolbar.ActionControls;

namespace YourApplicationName.Module.Controllers {
    public class MyViewController : ObjectViewController<DetailView, MyObject> {
        public MyViewController() {
            var action = new SimpleAction(this, "Test", "My");
            action.CustomizeControl += Action_CustomizeControl;
        }
        private void Action_CustomizeControl(object sender, CustomizeControlEventArgs e) {
            if(e.Control is DxToolbarItemSimpleActionControl actionControl) {
                actionControl.ToolbarItemModel.RenderStyle = ButtonRenderStyle.Primary;
            }
        }
    }
}

csharp

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.XtraLayout;
using System.Windows.Forms;

namespace YourApplicationName.Module.Controllers {
    public class MyViewController : ObjectViewController<DetailView, MyObject> {
        public MyViewController() {
            var action = new SimpleAction(this, "Test", "My");
            action.CustomizeControl += Action_CustomizeControl;
        }
        private void Action_CustomizeControl(object sender, CustomizeControlEventArgs e) {
            Control control = (Control)e.Control;
            LayoutControl layoutControl = (LayoutControl)control.Parent;
            LayoutControlItem item = layoutControl.GetItemByControl(control);
            item.Padding = new DevExpress.XtraLayout.Utils.Padding(0);
            layoutControl.OptionsView.AutoSizeInLayoutControl = AutoSizeModes.UseMinSizeAndGrow;
        }
    }
}

If you define an Action in the platform-independent module project, you can create a platform-specific descendant and handle the Action.CustomizeControl event in the descendant’s constructor.

Alternatively, create a new platform-specific Controller. In the Controller’s OnActivated method, call the Frame.GetController method to get the platform-independent Controller. Use the Controller.Actions property to get the Action and handle its Action.CustomizeControl event.

For more information on Windows Forms layout item settings, refer to the following topic : Size and Alignment.

Note

In Windows Forms applications, XAF creates a ButtonsContainer class (a Layout Control descendant) for each ActionContainerViewItem and places the ButtonsContainer in a Detail View layout. All Action controls are located in this class. If Action control customization does not meet your requirements, you can customize the ButtonsContainer class.