# Layout Items and Groups | WPF Controls | DevExpress Documentation Layout items and groups are base elements for both [Layout Control](/WPF/8147/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-control) and [Data Layout Control](/WPF/11540/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/data-layout-control). ## Layout Items A [LayoutItem](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem) ([DataLayoutItem](/WPF/DevExpress.Xpf.LayoutControl.DataLayoutItem)) object is a control that provides label and content regions. The control region can display any UIElement object. ![LayoutItem](/WPF/images/layoutitem11641.png) You can use LayoutItems within a [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) to display a label next to a control. For [Data Layout Control](/WPF/11540/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/data-layout-control), use [DataLayoutItem](/WPF/DevExpress.Xpf.LayoutControl.DataLayoutItem) instead. ![CD_LayoutItems](/WPF/images/cd_layoutitems11642.png) - XAML 
<Window ...
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxl="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
        ...>
    <Window.Resources>
        <Style x:Key="customCornerStyle" TargetType="dxl:GroupBox">
            <Setter Property="CornerRadius" Value="10"/>
            <Setter Property="Background" Value="White"/>
        </Style>
    </Window.Resources>
    <dxl:LayoutControl>
        <dxl:LayoutGroup View="GroupBox" Orientation="Vertical"
                         Header="Address info" GroupBoxStyle="{StaticResource customCornerStyle}">

            <dxl:LayoutGroup Orientation="Horizontal">
                <dxl:LayoutItem Label="Country" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="USA"/>
                </dxl:LayoutItem>
                <dxl:LayoutItem Label="Region" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="WA"/>
                </dxl:LayoutItem>
            </dxl:LayoutGroup>

            <dxl:LayoutGroup Orientation="Horizontal">
                <dxl:LayoutItem Label="City" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="Seattle"/>
                </dxl:LayoutItem>
                <dxl:LayoutItem Label="Postal code" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="98122"/>
                </dxl:LayoutItem>
            </dxl:LayoutGroup>

            <dxl:LayoutGroup Orientation="Horizontal">
                <dxl:LayoutItem Label="Address" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="507 - 20th Ave.E. Apt.2A"/>
                </dxl:LayoutItem>
            </dxl:LayoutGroup>

            <dxl:LayoutGroup Orientation="Horizontal">
                <dxl:LayoutItem Label="Home phone" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="2065559857" MaskType="Simple" 
                                  Mask="(000) 000-0000" MaskUseAsDisplayFormat="True"/>
                </dxl:LayoutItem>
                <dxl:LayoutItem Label="Postal code" AddColonToLabel="True">
                    <dxe:TextEdit EditValue="5467"/>
                </dxl:LayoutItem>
            </dxl:LayoutGroup>

        </dxl:LayoutGroup>
    </dxl:LayoutControl>
</Window>
The LayoutControl supports automatic alignment for its child LayoutItem objects. The left edges of item content regions are automatically aligned within groups, and even across multiple groups. See [Aligning contents of LayoutItems](/WPF/8152/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/aligning-contents-of-layoutitems) to learn more. To provide a label for a LayoutItem, use the [LayoutItem.Label](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem.Label) property. The [LayoutItem.LabelTemplate](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem.LabelTemplate) allows you to specify a DataTemplate used to render the label. The label’s style can be customized via the [LayoutItem.LabelStyle](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem.LabelStyle) property. You can display the label at the top of the item’s content region. To change the position, see the [LayoutItem.LabelPosition](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem.LabelPosition) property. A layout item’s content can be specified via the [LayoutItem.Content](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem.Content) property. To specify item content in XAML, define the object between the LayoutItem’s start and end tags. ## See Also - [Layout Control](/WPF/8147/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-control) - [Aligning contents of LayoutItems](/WPF/8152/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/aligning-contents-of-layoutitems) - [How to: Build a compound layout](/WPF/8358/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-build-a-compound-layout) - [How to: Build Non-Linear Layout via LayoutControl](/WPF/8360/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-build-non-linear-layout-via-layoutcontrol) ## Layout Groups A [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup) is a container that arranges its items ([LayoutItem](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem) and [DataLayoutItem](/WPF/DevExpress.Xpf.LayoutControl.DataLayoutItem) objects or other layout groups) in the specific manner. The LayoutGroup cannot be used outside a [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) or [DataLayoutControl](/WPF/DevExpress.Xpf.LayoutControl.DataLayoutControl). The [LayoutGroup.View](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView) or [LayoutGroupView.GroupBox](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView), the group’s items are arranged in a single row or column, according to the [LayoutGroup.Orientation](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView)), a group doesn’t display its header. To enable the header, set the [LayoutGroup.View](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.View) property to [LayoutGroupView.GroupBox](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView). To specify the object to display in the group’s header use the [LayoutGroup.Header](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Header) property. A LayoutGroup supports the collapsing feature in the [LayoutGroupView.GroupBox](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView) paint style. You can enable the collapsing feature by setting the [LayoutGroup.IsCollapsible](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.IsCollapsed). The following code creates a LayoutGroup with two items. The collapsing feature is enabled via the [LayoutGroup.IsCollapsible](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.IsCollapsible) option: - XAML 
<lc:LayoutGroup Orientation="Vertical" View="GroupBox" Header="Layout Group" 
                Width="150" IsCollapsible="True">
    <lc:LayoutItem Label="Item 1">
        <TextBox   Text=""/>
    </lc:LayoutItem>
    <lc:LayoutItem Label="Item 2">
        <TextBox   Text=""/>
    </lc:LayoutItem>
</lc:LayoutGroup>
The result is shown below: ![LayoutGroup1](/WPF/images/layoutgroup111812.png) To enable the tabbed UI for a LayoutGroup, set [LayoutGroup.View](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.View) to [LayoutGroupView.Tabs](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView). 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](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Header) object. For other layout items, you can specify tab headers via the [LayoutControl.TabHeader](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl.TabHeader) attached property. The following code creates a tabbed LayoutGroup: - XAML 
<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>
            <lc:LayoutItem Label="Item B">
                <TextBox   Text=""/>
            </lc:LayoutItem>
        </lc:LayoutGroup>
        <lc:LayoutItem Label="Item 2" lc:LayoutControl.TabHeader="Tabbed Item">
            <TextBox   Text=""/>
        </lc:LayoutItem>
    </lc:LayoutGroup>
</lc:LayoutControl>
The result is shown below: ![LayoutGroup1_Tabbed](/WPF/images/layoutgroup1_tabbed11813.png) The most common scenario for using a LayoutGroup is in a [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl). Using LayoutGroups, you can build compound layouts, as demonstrated in the [Layout Control](/WPF/8147/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-control) topic. ## See Also - [Aligning Items within LayoutGroup and LayoutControl Objects](/WPF/8153/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/aligning-items-within-layoutgroup-and-layoutcontrol-objects) - [How to: Build a compound layout](/WPF/8358/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-build-a-compound-layout) - [How to: Build Non-Linear Layout via LayoutControl](/WPF/8360/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-build-non-linear-layout-via-layoutcontrol) - [How to: Customize style of LayoutGroup’s header](/WPF/8361/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-customize-style-of-layoutgroups-header)