How to: Build a compound layout

• Jun 07, 2019

This example demonstrates how to build a compound layout using the LayoutControl.

View Example

MainWindow.xaml

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