Layout Items and Groups
- 4 minutes to read
Layout items and groups are base elements for both Layout Control and Data Layout Control.
Layout Items
A LayoutItem (DataLayoutItem) object is a control that provides label and content regions. The control region can display any UIElement object.
You can use LayoutItems within a LayoutControl to display a label next to a control. For Data Layout Control, use DataLayoutItem instead.
<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 to learn more.
To provide a label for a LayoutItem, use the LayoutItem.Label property. The LayoutItem.LabelTemplate allows you to specify a DataTemplate used to render the label. The label’s style can be customized via the 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 property.
A layout item’s content can be specified via the LayoutItem.Content property. To specify item content in XAML, define the object between the LayoutItem’s start and end tags.
See Also
- Layout Control
- Aligning contents of LayoutItems
- How to: Build a compound layout
- How to: Build Non-Linear Layout via LayoutControl
Layout Groups
A LayoutGroup is a container that arranges its items (LayoutItem and DataLayoutItem objects or other layout groups) in the specific manner. The LayoutGroup cannot be used outside a LayoutControl or DataLayoutControl.
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>
<lc:LayoutItem Label="Item 2">
<TextBox Text=""/>
</lc:LayoutItem>
</lc:LayoutGroup>
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>
<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:
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.