How to Add an Unbound Control (Button) to the Form Layout in an XAF View (with a Built-in ActionContainerViewItem)
- 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:
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 toMyActionContainer
and theActionContainer
property toNone
.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.
For more information on how to customize the view layout, refer to the following topic: View Items Layout Customization.
Run the application. The Action button is visible in the required Detail View:
- ASP.NET Core Blazor
- Windows Forms
#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.
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;
}
}
}
}
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 Buttons
class (a Layout Control descendant) for each Action
and places the Buttons
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 Buttons
class.