Getting Started with DockLayoutControl

• May 22, 2020
• 3 minutes to read

A Dock Layout Control represents a container that docks its child items to its edges. This tutorial shows how to use a DockLayoutControl to create the following layout.

The layout contains four items (GroupBox objects). Three of them are docked to the container's edges and the fourth item occupies the container's remaining area. The way child controls are docked is dependant on the order in which the children are declared in XAML.

In this tutorial, we'll build the layout in Expression Blend 3.

1. Create a new project in Expression Blend 3. Name it DockLayoutControlSample.
2. In the Projects tab, add references to the following libraries: DevExpress.Xpf.Core and DevExpress.Xpf.LayoutControl. These libraries can be located in the installation directory.

3. In the Assets tab, locate the DXLayoutControl group. This group lists components that are found in the DXLayoutControl Suite.

   

   Double-click the DockLayoutControl element. The following XAML will be generated, which adds a DockLayoutControl object to the UserControl:

   XAML

   
   <UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:DevExpress_DXLayoutControl="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
       x:Class="DockLayoutControlSample.MainPage"
       Width="640" Height="480">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <DevExpress_DXLayoutControl:DockLayoutControl Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"/>
       </Grid>
   </UserControl>
   

4. Let's do some optimization in this XAML. First, let's make the DockLayoutControl the root component, by removing the Grid component. Second, replace the long DevExpress_DXLayoutControl namespace with a short "lc" string. Third, remove all attribute setters from the DockLayoutControl tag and add a new one, setting the Background to White. The result is as follows:

   XAML

   
   <UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:lc="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
       x:Class="DockLayoutControlSample.MainPage"
       Width="640" Height="480">
   
       <lc:DockLayoutControl Background="White"/>
   
   </UserControl>
   

5. In the Assets tab, double-click the GroupBox element. This adds a new GroupBox object as a child of the DockLayoutControl (in this tutorial, GroupBox objects will be used as children of the DockLayoutControl):

   XAML

   
   <lc:DockLayoutControl Background="White">
       <lc:GroupBox Header="GroupBox"/>
   </lc:DockLayoutControl>
   

   

6. Add three more GroupBox items in the same way. Set the Header properties for the four items to: "Left Group", "Top Group", "Right Group" and "Client Group", respectively.

   XAML

   
   <lc:DockLayoutControl Background="White">
       <lc:GroupBox Header="Left Group"/>
       <lc:GroupBox Header="Top Group"/>
       <lc:GroupBox Header="Right Group"/>
       <lc:GroupBox Header="Client Group"/>
   </lc:DockLayoutControl>
   

   

   Note that all children are docked to the container's left edge. In the next step, we'll change their dock position.

7. To dock a child control to a specific edge of the DockLayoutControl, use the DockLayoutControl.Dock attached property for this child.

   You can set the Dock property via a child control's context menu. In the designer, right-click the Top Group and select Top from the Dock sub-menu.

   

   In the same manner, set the dock position for the Right Group and Client Group to Right and Client, respectively.

   The following XAML will be generated.

   XAML

   
   <lc:DockLayoutControl Background="White">
       <lc:GroupBox Header="Left Group"/>
       <lc:GroupBox Header="Top Group" lc:DockLayoutControl.Dock="Top"/>
       <lc:GroupBox Header="Right Group" lc:DockLayoutControl.Dock="Right"/>
       <lc:GroupBox Header="Client Group" lc:DockLayoutControl.Dock="Client"/>
   </lc:DockLayoutControl>
   

   

8. Let's enable horizontal and vertical sizing for the items that are docked to the DockLayoutControl's edges. When this feature is active, a sizer is displayed next to this item.

   Item sizing can be enabled by using the DockLayoutControl.AllowHorizontalSizing and DockLayoutControl.AllowVerticalSizing attached properties. Like the Dock attached property, these properties can also be set via a child control's context menu.

   

   Enable vertical sizing for the Top Group, and horizontal sizing for the Left Group and Right Group. The following XAML and image show the result.

   XAML

   
   <lc:DockLayoutControl Background="White">
       <lc:GroupBox Header="Left Group" lc:DockLayoutControl.AllowHorizontalSizing="True"/>
       <lc:GroupBox Header="Top Group" lc:DockLayoutControl.Dock="Top" lc:DockLayoutControl.AllowVerticalSizing="True"/>
       <lc:GroupBox Header="Right Group" lc:DockLayoutControl.Dock="Right" lc:DockLayoutControl.AllowHorizontalSizing="True"/>
       <lc:GroupBox Header="Client Group" lc:DockLayoutControl.Dock="Client"/>
   </lc:DockLayoutControl>
   

   

That's all for this tutorial. The final variant of the XAML code is:

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v14.2"
    x:Class="DockLayoutControlSample.MainPage"
    Width="640" Height="480">

    <lc:DockLayoutControl Background="White">
        <lc:GroupBox Header="Left Group" lc:DockLayoutControl.AllowHorizontalSizing="True"/>
        <lc:GroupBox Header="Top Group" lc:DockLayoutControl.Dock="Top" lc:DockLayoutControl.AllowVerticalSizing="True"/>
        <lc:GroupBox Header="Right Group" lc:DockLayoutControl.Dock="Right" lc:DockLayoutControl.AllowHorizontalSizing="True"/>
        <lc:GroupBox Header="Client Group" lc:DockLayoutControl.Dock="Client"/>
    </lc:DockLayoutControl>

</UserControl>