How to: Create Layout of Controls Within Form

• Jul 26, 2018

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

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>