How to build a layout of controls within LayoutPanels

• Jun 07, 2019

This example shows how to arrange controls within LayoutPanels forming a custom layout.

The following image shows the result of the XAML execution:

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-build-a-layout-of-controls-within-layoutpanels-e1848.

Window1.xaml

<Window x:Class="LayoutPanel_Content_Ex.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
        Title="DockLayoutManager">

    <dxdo:DockLayoutManager Name="dockLayoutManager1">
        <dxdo:DockLayoutManager.LayoutRoot>
            <dxdo:LayoutGroup Name="Root">
                <dxdo:LayoutPanel Caption="Panel1">
                    <dxdo:LayoutGroup Orientation="Vertical">
                        <dxdo:LayoutGroup Caption="Personal info"
                                          GroupBorderStyle="GroupBox"
                                          Orientation="Vertical"
                                          ShowCaption="True">
                            <dxdo:LayoutControlItem Caption="Title">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                            <dxdo:LayoutGroup ItemHeight="Auto">
                                <dxdo:LayoutControlItem Caption="First name">
                                    <dxe:TextEdit />
                                </dxdo:LayoutControlItem>
                                <dxdo:LayoutControlItem Caption="Last name">
                                    <dxe:TextEdit />
                                </dxdo:LayoutControlItem>
                            </dxdo:LayoutGroup>
                        </dxdo:LayoutGroup>
                        <dxdo:LayoutGroup Caption="Notes"
                                          GroupBorderStyle="GroupBox"
                                          ShowCaption="True">
                            <dxdo:LayoutControlItem Caption="Notes" 
                                                    ShowCaption="False">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                        </dxdo:LayoutGroup>
                    </dxdo:LayoutGroup>
                </dxdo:LayoutPanel>
                <dxdo:LayoutPanel Caption="Panel2">
                    <dxdo:LayoutGroup Caption="Address info"
                                      GroupBorderStyle="GroupBox"
                                      Orientation="Vertical"
                                      ShowCaption="True">
                        <dxdo:LayoutGroup ItemHeight="Auto">
                            <dxdo:LayoutControlItem Caption="Country">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                            <dxdo:LayoutControlItem Caption="Region">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                        </dxdo:LayoutGroup>
                        <dxdo:LayoutGroup ItemHeight="Auto">
                            <dxdo:LayoutControlItem Caption="City">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                            <dxdo:LayoutControlItem Caption="Postal code">
                                <dxe:TextEdit />
                            </dxdo:LayoutControlItem>
                        </dxdo:LayoutGroup>
                        <dxdo:LayoutControlItem Caption="Address">
                            <dxe:TextEdit />
                        </dxdo:LayoutControlItem>
                    </dxdo:LayoutGroup>
                </dxdo:LayoutPanel>
            </dxdo:LayoutGroup>
        </dxdo:DockLayoutManager.LayoutRoot>
    </dxdo:DockLayoutManager>

</Window>