Dock Layout Control

• Aug 04, 2023
• 2 minutes to read

Arrange items

The DockLayoutControl is an item container that supports the docking functionality. The child items can be docked to the left, top, right or bottom edge or occupy the control’s remaining region.

The following image shows a DockLayoutControl with six items docked to the control:

To specify how an item is docked, use the DockLayoutControl.Dock attached property. If an item is docked to a specific edge, it’s positioned along this edge within an area not occupied by other items. So, the way items are docked depends on the order in which the items are docked (the order in which the items are listed in the container’s Children collection). In the image above, the items are docked in the following order:

1. Item 1 is docked to the top
2. Item 2 is docked to the right
3. Item 3 is docked to the bottom
4. Item 4 is docked to the left
5. Item 5 is docked to the top
6. Item 6 is docked so that it occupies the remaining space

Resize Items

You can enable runtime resizing for individual items within a DockLayoutControl. This can be accomplished by using the DockLayoutControl.AllowHorizontalSizing and DockLayoutControl.AllowVerticalSizing attached properties. When resizing is enabled for an item, a sizer is displayed next to the item.

It’s possible to temporarily disable item resizing via the DockLayoutControl.AllowItemSizing property.

MainWindow.xaml

<Window x:Class="DockLayoutControl_Horz_Vert_Sizing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <lc:DockLayoutControl>
            <lc:GroupBox lc:DockLayoutControl.Dock="Top"
                         lc:DockLayoutControl.AllowVerticalSizing="True"
                         Height="70"
                         Header="GroupBox 1"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Right"
                         lc:DockLayoutControl.AllowHorizontalSizing="True"
                         Header="GroupBox 2"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Left"
                         lc:DockLayoutControl.AllowHorizontalSizing="True"
                         Header="GroupBox 3"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Client" 
                         Header="GroupBox 4"/>
        </lc:DockLayoutControl>
    </Grid>
</Window>