Create a Simple Layout of Dock Panes

• Sep 27, 2022
• 4 minutes to read

In this tutorial, we create a simple layout of dock panes:

This example defines the layout of the following dock panes in XAML:

• Toolbox - a regular dock pane (LayoutPanel), docked to the left.
• Properties - an auto-hidden dock pane (AutoHideGroup).
• Messages - a floating dock pane (FloatGroup).
• Document 1 and Document 2 - two tab pages (TabbedGroup), that are the main region of the application.

1. Create an Application and Add DockLayoutManager

1. Create a new WPF Application and open the Window1.xaml file in the Designer.

2. Add a DockLayoutManager component to the window. You can drag and drop it from the Toolbox.

   The DockLayoutManager is a container for dock panes.

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

   Window1.xaml

   <Window x:Class="SimpleDockingApplication.Window1"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
       Title="Window1" Height="390" Width="600">       
       <Grid>
           <dxdo:DockLayoutManager Margin="12" Name="DockLayoutManager1" />
       </Grid>
   </Window>
   

   You can overwrite your Window1.xaml file with this code without dragging a DockLayoutManager component to the window. In this case, you need to manually add the following libraries to the References section of your project: DevExpress.Data, DevExpress.Xpf.Core, DevExpress.Xpf.Docking and DevExpress.Xpf.Layout.Core.

2. Add a Root LayoutGroup

Each layout that is based on the DockLayoutManager should have a root LayoutGroup. This group is the root container for dock panes and dock pane groups (regular, tabbed or document groups). Add a LayoutGroup and set its Orientation property to Horizontal to arrange its children horizontally:

Window1.xaml

<Window x:Class="SimpleDockingApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Title="Window1" Height="390" Width="600">
    <Grid>
        <dxdo:DockLayoutManager Margin="12" Name="DockLayoutManager1">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <!-- ... -->
            </dxdo:LayoutGroup>                
        </dxdo:DockLayoutManager>
    </Grid>
</Window>

Auto-hidden and floating panes will not be added to the root LayoutGroup. They will be added to the DockLayoutManager‘s corresponding collections.

3. Add the Toolbox LayoutPanel

The Toolbox dock pane is docked at the left edge of the root LayoutGroup. To display a dock pane, add a LayoutPanel object to the root LayoutGroup:

Window1.xaml

<Window x:Class="SimpleDockingApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Title="Window1" Height="390" Width="600">
    <Grid>
        <dxdo:DockLayoutManager Margin="12" Name="DockLayoutManager1">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <dxdo:LayoutPanel x:Name="paneToolbox" Caption="Toolbox" ItemWidth="150">
                    <!-- ... -->
                </dxdo:LayoutPanel>
            </dxdo:LayoutGroup>                
        </dxdo:DockLayoutManager>
    </Grid>
</Window>

4. Add the Document 1 and Document 2 Tab Pages

Add a container to the root LayoutGroup, which will occupy its central section. This container displays the Document 1 and Document 2 tab pages.

To emulate the Visual Studio document tabbed interface with the DockLayoutManager, add a DocumentGroup object to the root LayoutGroup. The DocumentGroup‘s children (DocumentPanel objects) are displayed as tab pages:

Window1.xaml

<Window x:Class="SimpleDockingApplication.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
    Title="Window1" Height="390" Width="600">
    <Grid>
        <dxdo:DockLayoutManager Margin="12" Name="DockLayoutManager1">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <dxdo:LayoutPanel x:Name="paneToolbox" Caption="Toolbox" ItemWidth="150">
                    <!-- ... -->
                </dxdo:LayoutPanel>
                <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>
    </Grid>
</Window>

Add a Properties Auto-Hidden Dock Pane

1. Add an AutoHideGroup object to the AutoHideGroups collection.
2. Add a new LayoutPanel object to this group.

Window1.xaml

<dxdo:DockLayoutManager.AutoHideGroups>
    <dxdo:AutoHideGroup DockType="Right">
        <dxdo:LayoutPanel x:Name="paneProperties"  Caption="Properties">
        </dxdo:LayoutPanel>
    </dxdo:AutoHideGroup>
</dxdo:DockLayoutManager.AutoHideGroups>

Note

You can add only LayoutPanel objects to the AutoHideGroup.

Add a Messages Floating Dock Pane

1. Add a FloatGroup object to the FloatGroups collection.
2. Add a new LayoutPanel object to this group.

Window1.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>

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

Complete Code

Window1.xaml

<Window x:Class="SimpleDockingApplication.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="390" Width="600" xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking">
    <Grid>
        <dxdo:DockLayoutManager Margin="12" Name="dockManager1">
            <dxdo:LayoutGroup Orientation="Horizontal">
                <dxdo:LayoutPanel x:Name="paneToolbox" Caption="Toolbox" ItemWidth="150">
                    <!--Add custom controls to the pane here-->
                </dxdo:LayoutPanel>
                <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>
            <!--Create an auto-hidden pane-->
            <dxdo:DockLayoutManager.AutoHideGroups>
                <dxdo:AutoHideGroup DockType="Right">
                    <dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties">
                    </dxdo:LayoutPanel>
                </dxdo:AutoHideGroup>
            </dxdo:DockLayoutManager.AutoHideGroups>
            <!--Create a floating pane-->
            <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>

        </dxdo:DockLayoutManager>
    </Grid>
</Window>

View Example: Create a simple layout of dock panes