Skip to main content

LayoutGroup Class

Represents a container that arranges its items side by side (in a single row or column) or as tabs. The LayoutGroup cannot be used outside a LayoutControl or DataLayoutControl.

Namespace: DevExpress.Xpf.LayoutControl

Assembly: DevExpress.Xpf.LayoutControl.v22.1.dll


public class LayoutGroup :

The following members return LayoutGroup objects:


The LayoutGroup.View property specifies how the group’s items are displayed - side-by-side or as tabs.

If the property is set to LayoutGroupView.Group or LayoutGroupView.GroupBox, the group’s items are arranged in a single row or column, according to the LayoutGroup.Orientation property. The alignment of an item within a group can be adjusted via the item’s HorizontalAlignment and VerticalAlignment properties.

In default display mode (LayoutGroupView.Group), a group doesn’t display its header. To enable the header, set the LayoutGroup.View property to LayoutGroupView.GroupBox. To specify the object to display in the group’s header use the LayoutGroup.Header property.

A LayoutGroup supports the collapsing feature in the LayoutGroupView.GroupBox paint style. You can enable the collapsing feature by setting the LayoutGroup.IsCollapsible property. In this mode, the group displays the collapse/expand button, allowing an end-user to collapse/restore the group’s contents. To specify the expansion state in code, see LayoutGroup.IsCollapsed.

The following code creates a LayoutGroup with two items. The collapsing feature is enabled via the LayoutGroup.IsCollapsible option:

<lc:LayoutGroup Orientation="Vertical" View="GroupBox" Header="Layout Group" 
                Width="150" IsCollapsible="True">
    <lc:LayoutItem Label="Item 1">
        <TextBox   Text=""/>
    <lc:LayoutItem Label="Item 2">
        <TextBox   Text=""/>

The result is shown below:


To enable the tabbed UI for a LayoutGroup, set LayoutGroup.View to LayoutGroupView.Tabs. Each child will be represented as a tab.

If another LayoutGroup object is a child of a tabbed group, the corresponding tab header displays the LayoutGroup’s LayoutGroup.Header object. For other layout items, you can specify tab headers via the LayoutControl.TabHeader attached property.

The following code creates a tabbed LayoutGroup:

<lc:LayoutControl x:Name="layoutControl1" Background="#FFEAEAEA">
    <lc:LayoutGroup View="Tabs" Width="200" >
        <lc:LayoutGroup Orientation="Vertical" Header="Tab 1">
            <lc:LayoutItem Label="Item A">
                <TextBox   Text=""/>
            <lc:LayoutItem Label="Item B">
                <TextBox   Text=""/>
        <lc:LayoutItem Label="Item 2" lc:LayoutControl.TabHeader="Tabbed Item">
            <TextBox   Text=""/>

The result is shown below:



In the LayoutGroupView.Tabs mode, the LayoutControl sets the IsEnabled property for elements located within an inactive tab in a tabbed group to False. After the previously inactive tab is selected, the IsEnabled property value is restored.

The most common scenario for using a LayoutGroup is in a LayoutControl. Using LayoutGroups, you can build compound layouts, as demonstrated in the Layout Control topic.


See Also