How to create a simple layout of dock panes

• May 22, 2020
• 3 minutes to read

In this walkthrough, we will create the following simple layout of dock panels in XAML.

• Toolbox represents a regular dock panel, docked to the left.
• Properties is an auto-hidden dock panel.
• Messages is a floating dock panel.
• Document 1 and Document 2 are two tab pages, occupying a major region of a page.

Walkthrough

1. Create a new Silverlight Application and open the MainPage.xaml file in the Designer.

2. Add a DockLayoutManager component to the page. This can be performed by dragging the DockLayoutManager component from the Toolbox.

   This is the component you work with to add the docking functionality to your application.

   Set the DockLayoutManager.Margin property to 12. This will make the DockLayoutManager occupy the entire page with an empty space around it.

   XAML

   
   <UserControl x:Class="SimpleDockingApplication.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="400" d:DesignWidth="550"
       xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
   
       <dxdo:DockLayoutManager Margin="12" Name="dockLayoutManager1">
           <dxdo:DockLayoutManager.LayoutRoot>
               <dxdo:LayoutGroup Caption="LayoutRoot">
                   <dxdo:LayoutPanel Caption="Panel1"/>
                   <dxdo:LayoutPanel Caption="Panel2"/>
               </dxdo:LayoutGroup>
           </dxdo:DockLayoutManager.LayoutRoot>
       </dxdo:DockLayoutManager>
   
   </UserControl>
   

   When added to a page, DockLayoutManager creates a root LayoutGroup with two dock panels (LayoutPanel objects). The root group represents the root container for dock panels and dock panel groups (regular, tabbed or document groups). Auto-hidden and floating panels will not be added to the root LayoutGroup. They will be added to the DockLayoutManager's corresponding collections.

   

3. Set captions of the two created panels to Toolbox and Properties respectively. For the Toolbox panel, set its width to 150:

   XAML

   
   <dxdo:LayoutGroup Caption="LayoutRoot">
       <dxdo:LayoutPanel Caption="Properties"/>
       <dxdo:LayoutPanel Caption="Toolbox" ItemWidth="150"/>
   </dxdo:LayoutGroup>
   

   

4. Make the Properties panel auto-hidden

   To create an auto-hidden panel, first add an AutoHideGroup object to the DockLayoutManager.AutoHideGroups collection. Then, add a LayoutPanel object to this group.

   In this example, the declaration of the Properties panel is moved to the AutoHideGroups block.

   XAML

   
   <dxdo:DockLayoutManager Margin="12" Name="dockLayoutManager1">
       <dxdo:DockLayoutManager.LayoutRoot>
           <dxdo:LayoutGroup Caption="LayoutRoot">
               <dxdo:LayoutPanel Caption="Toolbox" ItemWidth="150"/>
           </dxdo:LayoutGroup>
       </dxdo:DockLayoutManager.LayoutRoot>
       <dxdo:DockLayoutManager.AutoHideGroups>
           <dxdo:AutoHideGroup DockType="Right">
               <dxdo:LayoutPanel Caption="Properties"/>
           </dxdo:AutoHideGroup>
       </dxdo:DockLayoutManager.AutoHideGroups>
   </dxdo:DockLayoutManager>
   

   

5. Add a container that will represent two documents (Document1 and Document2) as tabs, emulating MS Visual Studio tabbed UI. The container and individual documents are represented by the DocumentGroup and DocumentPanel objects, respectively.

   The container will be displayed next to the Toolbox panel and thus it needs to be added to the root LayoutGroup following the Toolbox panel declaration.

   XAML

   
   <dxdo:DockLayoutManager Margin="12" Name="dockLayoutManager1">
       <dxdo:DockLayoutManager.LayoutRoot>
           <dxdo:LayoutGroup Caption="LayoutRoot">
               <dxdo:LayoutPanel Caption="Toolbox" ItemWidth="150"/>
               <dxdo:DocumentGroup>
                   <dxdo:DocumentPanel x:Name="paneDocument1" Caption="Document 1">
                       <RichTextBox/>
                   </dxdo:DocumentPanel>
                   <dxdo:DocumentPanel x:Name="paneDocument2" Caption="Document 2">
                       <RichTextBox/>
                   </dxdo:DocumentPanel>
               </dxdo:DocumentGroup>
           </dxdo:LayoutGroup>
       </dxdo:DockLayoutManager.LayoutRoot>
       <dxdo:DockLayoutManager.AutoHideGroups>
           <dxdo:AutoHideGroup DockType="Right">
               <dxdo:LayoutPanel Caption="Properties"/>
           </dxdo:AutoHideGroup>
       </dxdo:DockLayoutManager.AutoHideGroups>
   </dxdo:DockLayoutManager>
   

   As you see, each DocumentPanel page displays a RichTextBox control.

   

   By default, a group's LayoutGroup.Orientation property is set to Horizontal. So the root group's children (the Toolbox panel and DocumentGroup) are horizontally oriented in this example. You can change this property, if required, to change the orientation of children within any group.

6. Add a Messages floating dock panel.

   To create a floating dock panel, first add a FloatGroup object to the DockLayoutManager.FloatGroups collection. Then, add a new LayoutPanel object to this group. Insert the following code in your MainPage.xaml file before the </dxdo:DockLayoutManager> line:

   XAML

   
   ...
   <dxdo:DockLayoutManager.FloatGroups>
       <dxdo:FloatGroup FloatSize="200,200" FloatLocation="200,100">
           <dxdo:LayoutPanel x:Name="paneMessages" Caption="Messages">
               <RichTextBox/>
           </dxdo:LayoutPanel>
       </dxdo:FloatGroup>
   </dxdo:DockLayoutManager.FloatGroups>
   

   

   NOTE

   You can also add regular and tabbed groups of LayoutPanel objects to a FloatGroup.

7. Now, you can run the application and see the result.

   In the example, names are not assigned to panels. You can assign names to panels manually if you want to refer to panels from code.

Complete Code