In certain scenarios you may be required to create additional functional regions in a UI to display specific data. This task can be solved by including additional controls into XAF templates and implementing the code that will supply data to the controls. To help you with the task, XAF offers built-in CustomizeTemplateViewControllerBaseController and complete design-time support for built-in templates. Combined, these features allow you to easily implement information panels that can display Actions, Views and any kind of data accessible from a View Controller. This topic describes the steps you need to perform to create a simple information panel. For general information on template customization, refer to the Template Customization help topic.
![]()
Include Required Templates into the Application
First, you need to decide which Templates you will customize. Different Templates are used in different parts of an application. To see a complete list of built-in Templates along with their descriptions, refer to the Templates topic. In this example, Windows Forms MainForm and DetailViewForm Templates will be customized as well as the ASP.NET DefaultVertical Template.
- Windows Forms Templates
Built-in Windows Forms Templates are regular classes located in the DevExpress.ExpressApp.Win assembly. To customize them, you need to include corresponding source code files into your solution and handle the XafApplication.CreateCustomTemplateevent. To learn how to do this, refer to the How to: Customize a Windows Forms Template help topic.
- ASP.NET Templates
Built-in ASP.NET Templates are pages whose content is taken from User Controls located in the DevExpress.ExpressApp.Web assembly. To customize them, you need to include corresponding source code files into your solution and modify the appropriate setting exposed via the WebApplication.Settings property. To learn how to do this, refer to the How to: Customize an ASP.NET Template help topic.
After all the required Templates are included in your solution, you can begin adding panel controls to them.
Add Panel Controls to Windows Forms Templates
To add a panel control to the MainForm or the DetailViewForm Template, right-click the Template in the Solution Explorer and choose "View Designer".
![]()
Locate the viewSitePanel control and change its Dock property from Fill to None.
![]()
To ensure that the Template can be correctly resized, set the SplitContainerControl’s Dock property to Fill and the FixedPanel property to Panel2.
![]()
To be able to fill the information panel with data, the SplitContainerControl must be externally visible. For this purpose, define an interface via which the information panel will be accessed. This will decouple data-supplying Controllers from particular Template types. Instead they will rely on the interface.
[C#]
publicinterfaceIInfoPanelTemplateWin:IFrameTemplate{DevExpress.XtraEditors.SplitContainerControlSplitContainer{get;}}
Then, implement the interface in the Templates.
[C#]
publicpartialclassMainForm:MainFormTemplateBase,IDockManagerHolder,ISupportClassicToRibbonTransform,IInfoPanelTemplateWin{publicDevExpress.XtraEditors.SplitContainerControlSplitContainer{get{returnsplitContainerControl1;}}}
Add Panel Controls to ASP.NET Web Templates
To add a panel control to the DefaultVertical Template, right-click the ASCX file that you have added as a replacement for the standard DefaultVertical content and choose "View Markup".
![]()
Add the following two cells to the MRC table.
[ASPx]
<tdid="RS"style="width: 6px; border-bottom-style: none; border-top-style: none"class="dxsplVSeparator_<%= BaseXafPage.CurrentTheme %>
dxsplPane_<%= BaseXafPage.CurrentTheme %>"><divid="RSB"class="dxsplVSeparatorButton_<%= BaseXafPage.CurrentTheme %>"onmouseover="OnMouseEnter('RSB')"onmouseout="OnMouseLeave('RSB')"onclick="OnClick('Right', 'RSI')"><divid="RSI"style="width: 6px;"class="dxWeb_splVCollapseForwardButton_<%= BaseXafPage.CurrentTheme %>"/></div></td><tdid="Right"width="250px"style="vertical-align: top"><cc3:XafUpdatePanelID="UPRight"runat="server"/></td>
The UPRight control in this markup will represent the information panel.
Open the code-behind file of your ASCX - right click the file and choose View Code.
![]()
Expose the protected UPRight control via the public property.
[C#]
publicpartialclassMyDefaultVerticalTemplateContent:TemplateContent{publicControlPlaceHolder{get{returnUPRight;}}}
In the ASP.NET module project, define an interface via which the information panel will be accessed from controllers.
[C#]
publicinterfaceIInfoPanelTemplateWeb:IFrameTemplate{ControlPlaceHolder{get;}}
Implement this interface in the Default template - edit the Default.aspx.cs file located in the ASP.NET application project.
[C#]
publicpartialclassDefault:BaseXafPage,IInfoPanelTemplateWeb{publicControlPlaceHolder{get{returnTemplateContentisMyDefaultVerticalTemplateContent?((MyDefaultVerticalTemplateContent)TemplateContent).PlaceHolder:null;}}}
Now you need to implement Windows Forms and ASP.NET Web View Controllers that will supply panel controls with actual data. To simplify this task, XAF provides the CustomizeTemplateViewControllerBase<TemplateType> Controller to inherit from. For convenience, the TemplateType generic parameter can be either a template type or an interface implemented by templates. CustomizeTemplateViewControllerBase already provides template access logic, so all that you should do is implement four protected abstract methods.
- AddControlsToTemplateCore(TemplateType template) - called when a Controller is activated. This method must instantiate required controls and add them to an information panel.
- RemoveControlsFromTemplateCore(TemplateType template) - called when a Controller is deactivated. This method must remove previously added controls from the information panel.
- UpdateControls(View view) - called when the current View is changed. This method must update information panel controls with View-specific information, if required.
- UpdateControls(object currentObject) - called when a currently displayed object is changed. This method must update information panel controls with data specific to the currently displayed object, if required.
The implementations of WinForms and ASP.NET controllers are demonstrated in the InfoPanelViewControllerWin.cs and InfoPanelViewControllerWeb.cs files of this example.
Note: Alternatively, you can access the XAF template and customize it to implement a standard ASP.NET technique for your task (for example, Serving Dynamic Content with HTTP Handlers).
Question Comments
Added By:
Willem de Vries at:
12/17/2012 10:36:33 PM I'd like to see how the current skin can be applied to the panel.
Added By:
Konstantin B (DevExpress) at:
12/21/2012 3:10:33 AM Hi Willem. You can see it in the FeatureCenter demo ("Frame Templates" | "Info Panels" section).
Added By:
MohammedFarooq at:
12/8/2015 11:07:44 PM When i implemented this is in my main project, i am getting the following error. Eventhough the definition of Placeholder is properly available in files.
Error 12 Class 'Default' must implement 'ReadOnly Property PlaceHolder As System.Web.UI.Control' for interface 'MyProject.Module.Web.IInfoPanelTemplateWeb'. Implementing property must have matching 'ReadOnly' or 'WriteOnly' specifiers. G:\MyProject.Web\Default.aspx.vb