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

Create a new WPF Application and open the Window1.xaml file in the Designer.
Add a DockLayoutManager component to the window. You can drag and drop it from the Toolbox.

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

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

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

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

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

Window1.xaml

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

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

Window1.xaml

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

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