A newer version of this page is available. Switch to the current version.

LayoutGroup Class

Represents a group of items, arranging them side by side (either horizontally or vertically) or using the tabbed UI (the tabbed UI is only supported when combining layout items).

Namespace: DevExpress.Xpf.Docking

Assembly: DevExpress.Xpf.Docking.v19.1.dll


public class LayoutGroup :
Public Class LayoutGroup
    Inherits BaseLayoutItem
    Implements IGeneratorHost,


A LayoutGroup object arranges its items side by side (either horizontally or vertically) or using the tabbed UI (the tabbed UI is supported when the LayoutGroup is used to combine layout items).

When child items are arranged side by side, you can change the group's orientation via the LayoutGroup.Orientation property. You can add other LayoutGroups as children to a LayoutGroup, creating a complex layout.

LayoutGroups can be used to combine either dock items or layout items. A single layout group cannot combine dock and layout items at the same time.

The following image shows dock items combined into LayoutGroups:


A LayoutGroup can be represented with or without borders. Typically, you enable borders for the LayoutGroups that are used to combine layout items, rather than dock items. The border paint style, specified by the LayoutGroup.GroupBorderStyle property, also affects the appearance of the group's header, displaying the group's caption plus any other required elements (for instance, the expand button). The group's caption is visible if the group borders are enabled and the BaseLayoutItem.ShowCaption inherited property is set to true. Setting the LayoutGroup.GroupBorderStyle property to GroupBorderStyle.Tabbed enables the tabbed UI, where child elements are represented as tabs.

The following image shows LayoutGroups combining layout items. There are groups with and without borders. For groups with borders, captions are visible:


  1. Do not combine dock and layout items within a single group.

  2. Do not combine groups containing dock items with groups containing layout items. If you need to arrange layout items next to dock items, add the layout items into a dock panel (a LayoutPanel object).

  3. Do not use dock items outside the DockLayoutManager control.

For more information, see Layout Groups.


This example shows how to create a complex layout of dock panels, by combining the panels into LayoutGroups. The following Layout Groups are created:

- RootGroup (arranges LayoutGroup1 and LayoutGroup3 horizontally)

- LayoutGroup1 (arranges LayoutGroup2 and TabbedGroup vertically)

- LayoutGroup2 (arranges three LayoutPanels horizontally)

- LayoutGroup3 (arranges two LayoutPanels vertically).

The following image shows the created structure of dock panels:


<Window x:Class="CreateLayoutGroups.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="718" xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" xmlns:dxcore="http://schemas.devexpress.com/winfx/2008/xaml/core">
        <dxdo:DockLayoutManager Margin="12" Name="dockManager1" dxcore:ThemeManager.ThemeName="Office2007Blue">
            <dxdo:LayoutGroup x:Name="RootGroup" Orientation="Horizontal">

                <dxdo:LayoutGroup x:Name="LayoutGroup1" Orientation="Vertical" ItemWidth="3*">

                    <dxdo:LayoutGroup x:Name="LayoutGroup2" Orientation="Horizontal" ItemHeight="1.5*">
                        <dxdo:LayoutPanel x:Name="paneToolbox" Caption="Toolbox" />
                        <dxdo:LayoutPanel x:Name="paneFindResults" Caption="Find Results" />
                        <dxdo:DocumentGroup x:Name="documentGroup1">
                            <dxdo:DocumentPanel Caption="Document 1">
                                <RichTextBox />
                            <dxdo:DocumentPanel Caption="Document 2">
                                <RichTextBox />
                    <dxdo:TabbedGroup Padding="12">
                        <dxdo:LayoutPanel x:Name="paneErrorList" Caption="Error List">

                        <dxdo:LayoutPanel x:Name="paneOutput" Caption="Output">


                <dxdo:LayoutGroup x:Name="LayoutGroup3" Orientation="Vertical">
                    <dxdo:LayoutPanel x:Name="paneSolutionExplorer" Caption="Solution Explorer" ItemHeight="100">
                    <dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties">



See Also