Access Form Layout Control in XAF DetailView and DashboardView
- 5 minutes to read
To display View Items according to layout settings defined in a DetailView or DashboardView node of the Application Model, XAF applications use platform-specific Layout Managers. Each Layout Manager uses its own component to show controls in a Composite View:
- ASP.NET Core Blazor
BlazorLayoutManager: DxFormLayout- Windows Forms
WinLayoutManager: LayoutControl- ASP.NET Web Forms
WebLayoutManager: a panel withLayoutItemTemplateContainerBaseitems
You can use either of the following techniques to access these components and their items and define settings that are not exposed in the Application Model:
- For an application-wide impact, override the
CreateLayoutManagerCorevirtual method of the XafApplication class in the platform-specific Application.cs file. - If you want to limit the impact to a specific View, use a View Controller.
See the sections below for platform-specific implementations of these techniques.
ASP.NET Core Blazor
Handle the BlazorLayoutManager.ItemCreated event to access the properties of the following components:
For example, you can use the following code to set the second tab as active when a user opens a Detail View.
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components.Models;
using DevExpress.ExpressApp.Blazor.Layout;
using YourApplicationName.Module.BusinessObjects;
namespace YourApplicationName.Blazor.Server.Controllers {
public class AccessLayoutManagerController : ObjectViewController<DetailView, Employee> {
protected override void OnActivated() {
base.OnActivated();
((BlazorLayoutManager)View.LayoutManager).ItemCreated +=
AccessLayoutManagerController_ItemCreated;
}
protected override void OnDeactivated() {
((BlazorLayoutManager)View.LayoutManager).ItemCreated -=
AccessLayoutManagerController_ItemCreated;
base.OnDeactivated();
}
private void AccessLayoutManagerController_ItemCreated(object sender, BlazorLayoutManager.ItemCreatedEventArgs e) {
if(e.ModelLayoutElement.Id == "Tabs" && e.LayoutControlItem is DxFormLayoutTabPagesModel tabbedGroup) {
tabbedGroup.ActiveTabIndex = 1;
}
}
}
}
XAF ASP.NET Core Blazor applications store the active tab index in the Application Model. Use the IModelTabbedGroupBlazor.ActiveTabIndex property of the corresponding Detail View to specify this index in the Model Editor.
For additional information on how to customize the Detail View’s layout in code, refer to the following example: How to Show the Number of Nested List View Items In Tab Captions.
Windows Forms
Note
The Windows Forms module of your application should have a reference to the DevExpress.XtraLayout.v24.1 assembly.
To customize the Layout control for all Views, override the CreateLayoutManagerCore virtual method of the XafApplication class in the YourApplicationName.Win\YourApplicationNameWinApplication.cs file. For example, you can use the following code to enable the OptionsFocus.EnableAutoTabOrder option:
using DevExpress.ExpressApp.Layout;
using DevExpress.ExpressApp.Win;
using DevExpress.XtraLayout;
namespace YourApplicationName.Win;
public class YourApplicationNameWinApplication : WinApplication {
//
protected override LayoutManager CreateLayoutManagerCore(bool simple) {
LayoutManager layoutManager = base.CreateLayoutManagerCore(simple);
if(layoutManager.Container is LayoutControl layoutControl) {
layoutControl.OptionsFocus.EnableAutoTabOrder = false;
}
return layoutManager;
}
}
To customize the Layout control for a specific View, create a new View Controller in your Windows Forms module. To access LayoutControl, override the OnViewControlsCreated method or subscribe to the LayoutManager.LayoutCreated event.
using DevExpress.ExpressApp;
using DevExpress.XtraLayout;
namespace YourApplicationName.Win.Controllers;
public class LayoutControlViewController : ViewController<DetailView> {
protected override void OnViewControlsCreated() {
base.OnViewControlsCreated();
if(View.LayoutManager.Container is LayoutControl layoutControl) {
layoutControl.OptionsFocus.EnableAutoTabOrder = false;
}
}
}
Subscribe to the WinLayoutManager.ItemCreated event to access the following Layout control items:
For example, you can use the following code to set the second tab as active when a user opens a Detail View:
using System;
using DevExpress.ExpressApp;
using DevExpress.XtraLayout;
using DevExpress.ExpressApp.Win.Layout;
namespace YourApplicationName.Win {
public class WinCustomizeTabControlViewController : ViewController<DetailView> {
TabbedControlGroup tabbedGroup;
WinLayoutManager layoutManager;
protected override void OnActivated() {
base.OnActivated();
layoutManager = (WinLayoutManager)View.LayoutManager;
layoutManager.ItemCreated += OnItemCreated;
layoutManager.LayoutCreated += OnLayoutCreated;
}
void OnItemCreated(object sender, ItemCreatedEventArgs e) {
// Check the Id in the YourApplicationName.Module\Model.DesignedDiffs.xafml file
if (e.ModelLayoutElement.Id == "MyTabbedGroup") {
tabbedGroup = (TabbedControlGroup)e.Item;
}
}
private void OnLayoutCreated(object sender, EventArgs e) {
if (tabbedGroup != null) {
tabbedGroup.SelectedTabPageIndex = 1;
}
}
protected override void OnDeactivated() {
if (layoutManager != null) {
layoutManager.ItemCreated -= OnItemCreated;
layoutManager.LayoutCreated -= OnLayoutCreated;
layoutManager = null;
}
tabbedGroup = null;
base.OnDeactivated();
}
}
}
For details of this implementation, see the following example: How to access a tab control in a Detail View layout.
For additional information on how to customize the Detail View layout in code, refer to the following topics and examples:
ASP.NET Web Forms
Use the following code to access ASPxPageControl and set the second tab as active when a user opens a Detail View:
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Web.Layout;
using YourApplicationName.Module.BusinessObjects;
namespace YourApplicationName.Module.Web.Controllers {
public class AccessToPageControlController : ObjectViewController<DetailView, Employee> {
protected override void OnActivated() {
base.OnActivated();
((WebLayoutManager)View.LayoutManager).PageControlCreated += OnPageControlCreated;
}
protected override void OnDeactivated() {
((WebLayoutManager)View.LayoutManager).PageControlCreated -= OnPageControlCreated;
base.OnDeactivated();
}
private void OnPageControlCreated(object sender, PageControlCreatedEventArgs e) {
if(e.Model.Id == "TabbedGroup") {
e.PageControl.ClientSideEvents.Init = "function(s, e){ s.SetActiveTabIndex(1); }";
((WebLayoutManager)View.LayoutManager).PageControlCreated -= OnPageControlCreated;
}
}
}
}
For details of this implementation, see the following example: How to access a tab control in a Detail View layout.
For additional information about layout in ASP.NET Web Forms, refer to the following demo resources:
- ASP.NET Web Forms (Custom Layout Templates,
LayoutItemTemplateContainerBase,LayoutGroupTemplateContainer,TabbedGroupTemplateContainer)
C:\Users\Public\Documents\DevExpress Demos 24.1\Components\XAF\FeatureCenter.NETFramework.XPO\CS\FeatureCenter.Module.Web\Layout\WebLayoutDemoController.cs - ASP.NET Web Forms (Custom Layout Templates)
C:\Users\Public\Documents\DevExpress Demos 24.1\Components\XAF\FeatureCenter.NETFramework.XPO\CS\FeatureCenter.Module.Web\Layout\CustomLayoutTemplates.cs - ASP.NET Web Forms
C:\Program Files\DevExpress 24.1\Components\Sources\DevExpress.ExpressApp\DevExpress.ExpressApp.Web\Layout