LayoutControl Class
Represents a control container that arranges its items in a single column or row, and allows you to create compound layouts of controls, with the ability to combine the controls into groups and align the controls according to their labels.
Namespace: DevExpress.Xpf.LayoutControl
Assembly: DevExpress.Xpf.LayoutControl.v19.2.dll
Declaration
public class LayoutControl :
LayoutGroup,
ILayoutControl,
ILayoutGroup,
ILayoutControlBase,
IScrollControl,
IPanel,
IControl,
ILayoutModelBase,
ILayoutGroupModel,
ILiveCustomizationAreasProvider,
ILayoutControlModelRemarks
The LayoutControl container arranges its child items in a single column or row, according to the LayoutGroup.Orientation inherited property. Any types of controls can be added to the LayoutControl container. However, to create compound layouts of controls, you need to combine the controls into LayoutGroups and add the groups as children to the LayoutControl.
The LayoutGroup is a container that arranges its items either side-by-side (in a single column or row) or as tabs. Note that they can display other LayoutGroup objects as children in various orientations. This allows compound layouts to be implemented:
Unlike its predecessor, the LayoutControl doesn’t support a header. So, the LayoutGroup.Header and LayoutGroup.View inherited properties are ignored.
The most common basic element in the LayoutControl is the LayoutItem. This object represents a control consisting of a label and content regions. You can think of the LayoutItem as a wrapper that adds a label to your control. When using LayoutItem objects as wrappers for your controls within a LayoutControl, you benefit from the automatic control alignment feature. To learn more, see Layout Control.
This example demonstrates how to build a compound layout using the LayoutControl.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-build-a-compound-layout-via-layoutcontrol-e2256.
<Window x:Class="LayoutControl_CompoundLayout.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" Title="MainWindow" Height="347" Width="632">
<Grid x:Name="LayoutRoot" Background="White">
<lc:LayoutControl Orientation="Vertical" Background="#FFEAEAEA">
<lc:LayoutGroup Orientation="Horizontal">
<lc:LayoutGroup Orientation="Vertical">
<lc:LayoutItem Label="Item 1:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutGroup Orientation="Horizontal">
<lc:LayoutItem Label="Item 2:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutGroup Orientation="Vertical">
<lc:LayoutItem Label="Item 3:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutItem Label="Item 4:">
<TextBox />
</lc:LayoutItem>
</lc:LayoutGroup>
</lc:LayoutGroup>
</lc:LayoutGroup>
<lc:LayoutGroup View="Tabs">
<lc:LayoutGroup Header="Tab 1" Orientation="Vertical">
<lc:LayoutItem Label="Item 5:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutItem Label="Item 6:">
<TextBox />
</lc:LayoutItem>
</lc:LayoutGroup>
<lc:LayoutGroup Header="Tab 2">
<lc:LayoutItem Label="Item 7:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutItem Label="Item 8:">
<TextBox />
</lc:LayoutItem>
</lc:LayoutGroup>
</lc:LayoutGroup>
</lc:LayoutGroup>
<lc:LayoutGroup Orientation="Horizontal">
<lc:LayoutItem Label="Item 9:" HorizontalAlignment="Left">
<TextBox Width="100" />
</lc:LayoutItem>
<lc:LayoutItem Label="Item 10:">
<TextBox />
</lc:LayoutItem>
<lc:LayoutItem Label="Item 11:" HorizontalAlignment="Right">
<TextBox Width="100" />
</lc:LayoutItem>
</lc:LayoutGroup>
</lc:LayoutControl>
</Grid>
</Window>
Examples
- How to: Build Non-Linear Layout via LayoutControl
- How to: Save and restore layout of items in LayoutControl
Related GitHub Examples
The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutControl 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.