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:
NOTE
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-build-a-layout-of-controls-within-layoutpanels-e1848.
<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>
Feedback