How to: Use DockLayoutControl

• May 22, 2020

The following example creates a DockLayoutControl with six items. The items are docked via the DockLayoutControl.Dock attached property.

The following image shows the result:

XAML

<UserControl
    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"
    x:Class="SilverlightApplication10.MainPage"
    Width="500" Height="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <lc:DockLayoutControl >
            <lc:GroupBox lc:DockLayoutControl.Dock="Top" Height="70" Header="GroupBox 1"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Right" Header="GroupBox 2"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Bottom" Height="70" Header="GroupBox 3"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Left" Header="GroupBox 4"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Top" Height="70" Header="GroupBox 5"/>
            <lc:GroupBox lc:DockLayoutControl.Dock="Client" Header="GroupBox 6"/>
        </lc:DockLayoutControl>
    </Grid>
</UserControl>