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.v18.2.dll

Declaration

C#
VB.NET

public class LayoutGroup :
    BaseLayoutItem,
    IGeneratorHost,
    ILogicalOwner,
    IInputElement

Public Class LayoutGroup
    Inherits BaseLayoutItem
    Implements IGeneratorHost,
               ILogicalOwner,
               IInputElement

The following members return LayoutGroup objects:

Remarks

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:

LayoutGroup

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:

LayoutGroupWithLayoutItems

Note

Do not combine dock and layout items within a single group.
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).
Do not use dock items outside the DockLayoutManager control.

For more information, see Layout Groups.

Example

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:

LayoutGroup

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-complex-layout-of-dock-panels-e1663.

<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">
    <Grid>
        <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>
                            <dxdo:DocumentPanel Caption="Document 2">
                                <RichTextBox />
                            </dxdo:DocumentPanel>
                        </dxdo:DocumentGroup>
                    </dxdo:LayoutGroup>
                    <dxdo:TabbedGroup Padding="12">
                        <dxdo:LayoutPanel x:Name="paneErrorList" Caption="Error List">
                        </dxdo:LayoutPanel>

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

                </dxdo:LayoutGroup>

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

                </dxdo:LayoutGroup>

            </dxdo:LayoutGroup>


        </dxdo:DockLayoutManager>
    </Grid>
</Window>

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace CreateLayoutGroups
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CreateLayoutGroups {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}

The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutGroup class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#
VB.NET

wpf-dock-layout-manager-limit-layout-group-customization-at-runtime/CS/DXDockingForLayoutPurposes/MainWindow.xaml#L22

<dxd:DockLayoutManager x:Name="rootDockLayoutManager" AllowCustomization="True">
    <dxd:LayoutGroup>
        <dxd:DocumentPanel>

wpf-docklayoutmanager-build-a-layout-ui/VB/LayoutPanel_Content_Ex/Window1.xaml#L10

<dxdo:DockLayoutManager.LayoutRoot>
    <dxdo:LayoutGroup Name="Root">
        <dxdo:LayoutPanel Caption="Panel1">

wpf-dock-layout-manager-use-data-contexts-for-layout-items-and-their-child-controls/VB/DataContext_Ex/MainWindow.xaml#L8


<dxd:LayoutGroup Orientation="Vertical">
    <dxd:LayoutPanel x:Name="panelDescription" Caption="Description" ItemHeight="70">

wpf-dock-layout-manager-bind-a-layout-item-s-property-to-any-object-s-property-in-code/CS/BindToProperty_Ex/MainWindow.xaml#L3

<dxd:DockLayoutManager x:Name="dm1">
    <dxd:LayoutGroup Orientation="Vertical">
        <dxd:LayoutPanel x:Name="panel1" Caption="Panel 1" ItemHeight="70">

how-to-animate-a-layout-panel-by-its-width-height-e3643/CS/Q357154/MainWindow.xaml#L29

</dxd:DockLayoutManager.Background>
<dxd:LayoutGroup Orientation="Vertical" x:Name="rootGroup" AllowSplitters="False">
    <dxd:LayoutGroup AllowSplitters="False">

how-to-customize-item-appearance-on-the-hidden-items-tab-in-the-customization-window-t345603/VB/ShowHiddenItemsAsTree/MainWindow.xaml.vb#L33

Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
    If TypeOf item Is DevExpress.Xpf.Docking.LayoutGroup Then
        Return GroupTemplate