LayoutGroup Class

A group of horizontally or vertically aligned items.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#
VB.NET

[StyleTypedProperty(Property = "ExpandButtonStyle", StyleTargetType = typeof(ExpandButton))]
[TemplatePart(Name = "PART_ExpandButton", Type = typeof(ExpandButton))]
[TemplateVisualState(Name = "Collapsed", GroupName = "ExpandedStates")]
[TemplateVisualState(Name = "Expanded", GroupName = "ExpandedStates")]
[ToolboxTabName("DX.21.2: Navigation & Layout")]
public class LayoutGroup :
    LayoutGroupBase,
    ILayoutGroup

<ToolboxTabName("DX.21.2: Navigation & Layout")>
<TemplateVisualState(Name:="Expanded", GroupName:="ExpandedStates")>
<TemplateVisualState(Name:="Collapsed", GroupName:="ExpandedStates")>
<TemplatePart(Name:="PART_ExpandButton", Type:=GetType(ExpandButton))>
<StyleTypedProperty(Property:="ExpandButtonStyle", StyleTargetType:=GetType(ExpandButton))>
Public Class LayoutGroup
    Inherits LayoutGroupBase
    Implements ILayoutGroup

Remarks

A LayoutGroup object arranges its items either horizontally or vertically, as specified by the LayoutGroupBase.Orientation and LayoutGroupBase.PortraitOrientation inherited properties. You can add other LayoutGroups as children to a LayoutGroup, creating a complex layout.

To provide headers for LayoutGroups, use the Header inherited property. Groups support the expand/collapse functionality, controlled by the LayoutGroup.AllowExpand and LayoutGroup.Expanded properties.

Any controls can be displayed as LayoutGroup children. However, most typical children are LayoutItem and other LayoutGroup objects. When LayoutItems are displayed within LayoutGroups, their headers are aligned according to the LayoutGroupBase.ItemHeadersAlignment and LayoutItem.HeaderAlignment properties.

Example 1

The following code creates a LayoutControl with a single LayoutGroup. Items within the group are vertically aligned via the LayoutGroupBase.Orientation property:

LayoutGroup_ex1

XAML

<Layout:LayoutControl Orientation="Vertical" Width="400">
    <Layout:LayoutGroup Orientation="Vertical" Header="Personal Information" AllowExpand="True">
        <Layout:LayoutItem Header="First name:"><Editors:TextEdit/></Layout:LayoutItem>
        <Layout:LayoutItem Header="Last name:"><Editors:TextEdit/></Layout:LayoutItem>
    </Layout:LayoutGroup>
</Layout:LayoutControl>

Example 2

The following code creates a LayoutControl with nested LayoutGroups. Item arrangement within the groups is controlled by the LayoutGroupBase.Orientation property:

LayoutGroup_ex2

XAML

xmlns:Layout="using:DevExpress.UI.Xaml.Layout" 
xmlns:Editors="using:DevExpress.UI.Xaml.Editors"

<Layout:LayoutControl  Width="550">
    <Layout:LayoutGroup Orientation="Vertical" Header="Personal Information" AllowExpand="True">

        <Layout:LayoutGroup Orientation="Horizontal">
            <Layout:LayoutGroup Orientation="Vertical">
                <Layout:LayoutItem Header="Title:"><Editors:TextEdit/></Layout:LayoutItem>
                <Layout:LayoutItem Header="First name:"><Editors:TextEdit/></Layout:LayoutItem>
                <Layout:LayoutItem Header="Last name:"><Editors:TextEdit/></Layout:LayoutItem>
            </Layout:LayoutGroup>
            <Layout:LayoutItem HeaderPosition="Top" Header="Notes:"><Editors:TextEdit/></Layout:LayoutItem>
        </Layout:LayoutGroup>

        <Layout:LayoutGroup Orientation="Horizontal">
            <Layout:LayoutItem Header="Phone:"><Editors:TextEdit/></Layout:LayoutItem>
            <Layout:LayoutItem Header="E-mail:"><Editors:TextEdit/></Layout:LayoutItem>
            <Layout:LayoutItem Header="Skype:"><Editors:TextEdit/></Layout:LayoutItem>
        </Layout:LayoutGroup>
    </Layout:LayoutGroup>
</Layout:LayoutControl>