# Layout Control | WPF Controls | DevExpress Documentation

The [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) is a container of items that arranges these items in a single row or column.

You can add [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup) containers as children to the [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl). A LayoutGroup container allows you to arrange its items side-by-side (either vertically or horizontally) or as tabs.

A [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup) can contain other [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup) objects as children, arranging their items in a different direction. This allows non-linear layouts to be created:

![CD_LayoutControl](/WPF/images/cd_layoutcontrol11640.png)

The greatest benefit of using the [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) is that it automatically maintains a consistent layout of child controls. The controls do not overlap even, when the window is resized, controls are added or removed, or when the font settings of the controls are changed. (Controls may overlap if you manually adjust their `Margin` properties).

Besides the consistent layout functionality, the [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) provides access to the following features:

- Automatic alignment of controls that are embedded into the [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) using [LayoutItem](/WPF/8150/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-items-and-groups) wrappers. These controls are automatically aligned against their left edges according to their associated labels. 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.
- Use built-in size thumbs to resize child items and groups. Set [LayoutControl.AllowVerticalSizing](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl.AllowVerticalSizing) and [LayoutControl.AllowHorizontalSizing](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl.AllowHorizontalSizing) attached properties to `true` to display size thumbs.
- Aligning items within groups or [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl). You can align an item to any edge of its parent control, center it, or stretch it. When the parent’s size is changed, the item will adjust its position accordingly. See [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) to learn more.
- Customizing the layout in Customization Mode. In this mode, a user can modify the layout of items using drag & drop and change the alignment of controls within groups. For more information, see [Customization Mode](/WPF/8154/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/customization-mode).
- Groups can be rendered as tab containers or as [GroupBox](/WPF/DevExpress.Xpf.LayoutControl.GroupBox) objects (a container with a title).

## LayoutControl’s Elements

The [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) accepts items of any type. However, the following item types are the most common: 

- [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup). I– A container control that displays its children side-by-side (in a single row or column) or as tabs. You can use the [LayoutGroup.View](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.View) property to specify the [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup)‘s visual style:

    | Visual Style | Sample Image |
    | --- | --- |
    | [LayoutGroupView.GroupBox](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView)<br><br><br>  The group’s children are arranged in a single column or row, according to the [LayoutGroup.Orientation](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Orientation) property.<br><br><br>  In this mode, the group’s header ([LayoutGroup.Header](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Header)) and borders are visible. In addition, you can use the [LayoutGroup.IsCollapsible](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.IsCollapsible) property to enable the group collapse feature. | ![LayoutGroup_Style_GroupBox](/WPF/images/layoutgroup_style_groupbox11802.png) |
    | [LayoutGroupView.Group](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView)<br><br><br>  The group is rendered as a container, without a border and header. Like the previous visual style, items are arranged in a single column or row, according to the [LayoutGroup.Orientation](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Orientation) property. | ![LayoutGroup_Style_Group](/WPF/images/layoutgroup_style_group11803.png) |
    | [LayoutGroupView.Tabs](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroupView)<br><br><br>  The group is rendered as a tabbed group, where immediate children are displayed as tabs. You can display multiple items within a single tab by combining them into a single [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup) and adding this group as a child to the tabbed group.<br><br><br>  To specify tab headers for the children, use the following properties. If a LayoutGroup is a child of a tabbed group, use the group’s [LayoutGroup.Header](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup.Header) property. For other items, use the [LayoutControl.TabHeader](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl.TabHeader) attached property.<br><br><br>  The [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.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. | ![LayoutGroup_Style_Tabs](/WPF/images/layoutgroup_style_tabs11804.png) |
- [LayoutItem](/WPF/DevExpress.Xpf.LayoutControl.LayoutItem). –An object that displays a label for a control:

      ![LayoutItem](/WPF/images/layoutitem11641.png)

      It also features the automatic alignment of the controls within and across groups. See [Layout Items and Groups](/WPF/8150/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-items-and-groups) to learn more.

## LayoutControl - Arranging items

Using `LayoutGroups` as children within a [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) allows compound layouts to be implemented. 
Consider the following layout of items arranged within a [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl): 

![LayoutControl_OriginalLayout](/WPF/images/layoutcontrol_originallayout11643.png)

To create the layout displayed above, items to be arranged in the same direction are combined into the same group. Then, these groups are combined into other groups, etc. To understand how this layout is built, let’s make the borders and headers of the groups visible:

![LayoutControl_OriginalLayout_ShowBorders](/WPF/images/layoutcontrol_originallayout_showborders11644.png)

Here, the items are combined as follows:

- The [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl) arranges Group 1 and Group 5 vertically.
- Group 1 arranges Group 2 and a tabbed group horizontally.
- Group 2 arranges Item 1 and Group 3 vertically.
- Group 3 arranges Item 2 and Group 4 horizontally.
- Group 4 arranges two items vertically.
- The tabbed group contains two tabs (Tab 1 and Tab 2). Each tab contains specific items. For instance, Tab 1, which is a [LayoutGroup](/WPF/DevExpress.Xpf.LayoutControl.LayoutGroup), arranges Item 5 and Item 6 vertically.
- Group 5 arranges three items horizontally.

The complete XAML code for this example can be found at [How to: Build a compound layout](/WPF/8358/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-build-a-compound-layout).

## Smart Paste

You can apply a smart paste to the [LayoutControl](/WPF/DevExpress.Xpf.LayoutControl.LayoutControl). Refer to the following help topic for more information: [Smart Paste](/WPF/405369/ai-powered-extensions/smart-paste).

See Also

[Layout Items and Groups](/WPF/8150/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/layout-items-and-groups)

[Aligning contents of LayoutItems](/WPF/8152/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/aligning-contents-of-layoutitems)

[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)

[Customization Mode](/WPF/8154/controls-and-libraries/layout-management/tile-and-layout/layout-and-data-layout-controls/customization-mode)

[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)