Skip to main content
All docs
V21.2

DevExpress v25.1 Update — Your Feedback Matters

Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to build a layout of controls within LayoutPanels

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

The following image shows the result of the XAML execution:

LayoutPanel_Content_Ex

View Example

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