Using Dock Panels | Xafari Framework

Dock Panel term in Xafari refers to additional custom View that displays within freely positioned containers. Dock Panel is always accompanied by a certain "main" View or specified business object. It provides the user with access to additional useful information, at the same time a dock panel does not occupy the client area of the main window. Adding and customization of a dock panel is made entirely in the Application Model. A developer can set a master-detail relationship between the data in the main View and the dock panel.

The user can move a dock panel and attach it to different areas of the parent window. The image below shows different variants of dock panels placement in a Win application.

dock panel placing variants

Web application with dock panels:

web app with dock panel

The user can also temporarily hide a dock panel and thus easily customize the application interface in accordance with personal requirements.

hide dock panel in xafari

If moved to any location on the screen that is far enough away from the edges of the main window, the dock panel will remain floating and will be displayed in its own window, independent of the main one. If the dock panel is no longer needed, it can be removed from the screen.

Special Action, called Panels, is intended to manage dock panels: open and close.

How to Add a Dock Panel

In order to add dock panels functionality to an application, follow the steps below.

  • Add XafariDockPanelsModule to Module Project
  • Add XafariDockPanelsWinModule to Windows Forms Application Project
  • Add XafariDockPanelsWebModule to Web Forms Application Project

Xafari.DockPanels provides three main use cases:

  • Add the Dock Panel to a business object
  • Add the Dock Panel to a certain View
  • Add the Dock Panel to the main window

Invoke Model Editor and navigate to the required node, it may be business object, View or Xafari|DockPanels. Add new item to the Dock Panel node. The following picture demonstrates adding a new dock panel to Employee business object and Employee_ListView nodes:

dock panels model editor

The image below illustrates adding a dock panel to Xafari|DockPanels node.

xafari main window panel

Dock Panels in a Web Application

To use Dock Panels in a Web application you need to perform additional operations. It is necessary that ASP.NET Template Content implements IDockManagerHolder interface. Let’s consider one of the ways to do this.

Add new DevExpress XAF ASP.NET Default Template Content to Web Application Project (i.e. ProjectName.Web.App), name it DefaultVerticalTemplateContent. Modify .ascx-file as follows:

  • Add ASPxDockZone to provide a feature to fix the panel on the page. Add UpdatePanel and ASPxDockZone to <div id=”Spacer”. . ./> block:

code sample

  • Add ASPxDockZone to <div id="LP" class="LeftPane" . . ./> block:

xafari code exmaple

  • Since the application works with Xafari, replace all ActionContainerHolder with XafariActionContainerHolder. Note that <div id="VerticalTemplateHeader". . ./> block requires additional modifications. Replace cc2:ActionContainerHolder with cc6:XafariActionContainerHolder and add Panels category, where Panels Action will be placed:

dock panels action

  • Replace all other cc2:ActionContainerHolder on cc6:XafariActionContainerHolder
  • Add ASPxDockManager, it allows you to control all the panels on the page:

xafari dock manager code

The modification of the .ascx-file is completed. Now, see the .ascx.cs-files. Modify DefaultVerticalTemplateContent.ascx.cs and Default.aspx.cs files as follows:

Modify Session_Start method in Global.asax file. The following code demonstrates this:

That's all. Now you can build and run your ASP.NET application, and work with dock panels.

Dock Panels and Win Tabbed MDI

XAF supports Win application mode with an interface in the form of tabs, i.e. each new window is opened in a separate tab. Image below demonstrates Department, Contacts and Employees business objects displayed within separate tabs.

xafari employee card

To activate this view mode, it is enough to invoke Model Editor and set UIType property to “TabbedMDI” value.

dock panels tabbed mdi

However, TabbedMDI does not support Dock Panels. Image above shows that the Panels Action button does not accompany the Employee_ListView, despite the fact that there is Dock Panel for this entity.

The problem can be solved by adding a class:

Handle CreateCustomTemplate event in Windows Forms Application Project, modify WinApplication.cs file as follows:

Now you can build and run your Windows Forms applications, and see what they look like after these changes.

contact list

We hope this article was helpful. Don't hesitate to contact us in case you have any questions.