# Dock Layout Control | WPF Controls | DevExpress Documentation

## Arrange items

The [DockLayoutControl](/WPF/DevExpress.Xpf.LayoutControl.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:

![DockLayoutControl_Dock](/WPF/images/docklayoutcontrol_dock11635.png)

To specify how an item is docked, use the [DockLayoutControl.Dock](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.DockLayoutControl.AllowHorizontalSizing) and [DockLayoutControl.AllowVerticalSizing](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.DockLayoutControl.AllowItemSizing) property.

![DockLayoutControl_Horz_Vert_Sizing](/WPF/images/docklayoutcontrol_horz_vert_sizing11811.png)

- MainWindow.xaml

<section id="tabpanel_WoAk065YEm_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;Window x:Class=&quot;DockLayoutControl_Horz_Vert_Sizing.MainWindow&quot;
        xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
        xmlns:lc=&quot;http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol&quot;
        Title=&quot;MainWindow&quot; Height=&quot;350&quot; Width=&quot;525&quot;&gt;
    &lt;Grid&gt;
        &lt;lc:DockLayoutControl&gt;
            &lt;lc:GroupBox lc:DockLayoutControl.Dock=&quot;Top&quot;
                         lc:DockLayoutControl.AllowVerticalSizing=&quot;True&quot;
                         Height=&quot;70&quot;
                         Header=&quot;GroupBox 1&quot;/&gt;
            &lt;lc:GroupBox lc:DockLayoutControl.Dock=&quot;Right&quot;
                         lc:DockLayoutControl.AllowHorizontalSizing=&quot;True&quot;
                         Header=&quot;GroupBox 2&quot;/&gt;
            &lt;lc:GroupBox lc:DockLayoutControl.Dock=&quot;Left&quot;
                         lc:DockLayoutControl.AllowHorizontalSizing=&quot;True&quot;
                         Header=&quot;GroupBox 3&quot;/&gt;
            &lt;lc:GroupBox lc:DockLayoutControl.Dock=&quot;Client&quot; 
                         Header=&quot;GroupBox 4&quot;/&gt;
        &lt;/lc:DockLayoutControl&gt;
    &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre></section>

See Also

[How to: Use DockLayoutControl](/WPF/8366/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-use-docklayoutcontrol)