How to create a complex layout of dock panels
- 2 minutes to read
This example shows how to create a complex layout of dock panels, by combining the panels into LayoutGroups. The following Layout Groups are created:
- RootGroup (arranges LayoutGroup1 and LayoutGroup3 horizontally)
- LayoutGroup1 (arranges LayoutGroup2 and TabbedGroup vertically)
- LayoutGroup2 (arranges three LayoutPanels horizontally)
- LayoutGroup3 (arranges two LayoutPanels vertically).
The following image shows the created structure of dock panels:
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-complex-layout-of-dock-panels-e1663.
<Window x:Class="CreateLayoutGroups.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="718" xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking" xmlns:dxcore="http://schemas.devexpress.com/winfx/2008/xaml/core">
<Grid>
<dxdo:DockLayoutManager Margin="12" Name="dockManager1" dxcore:ThemeManager.ThemeName="Office2007Blue">
<dxdo:LayoutGroup x:Name="RootGroup" Orientation="Horizontal">
<dxdo:LayoutGroup x:Name="LayoutGroup1" Orientation="Vertical" ItemWidth="3*">
<dxdo:LayoutGroup x:Name="LayoutGroup2" Orientation="Horizontal" ItemHeight="1.5*">
<dxdo:LayoutPanel x:Name="paneToolbox" Caption="Toolbox" />
<dxdo:LayoutPanel x:Name="paneFindResults" Caption="Find Results" />
<dxdo:DocumentGroup x:Name="documentGroup1">
<dxdo:DocumentPanel Caption="Document 1">
<RichTextBox />
</dxdo:DocumentPanel>
<dxdo:DocumentPanel Caption="Document 2">
<RichTextBox />
</dxdo:DocumentPanel>
</dxdo:DocumentGroup>
</dxdo:LayoutGroup>
<dxdo:TabbedGroup Padding="12">
<dxdo:LayoutPanel x:Name="paneErrorList" Caption="Error List">
</dxdo:LayoutPanel>
<dxdo:LayoutPanel x:Name="paneOutput" Caption="Output">
</dxdo:LayoutPanel>
</dxdo:TabbedGroup>
</dxdo:LayoutGroup>
<dxdo:LayoutGroup x:Name="LayoutGroup3" Orientation="Vertical">
<dxdo:LayoutPanel x:Name="paneSolutionExplorer" Caption="Solution Explorer" ItemHeight="100">
</dxdo:LayoutPanel>
<dxdo:LayoutPanel x:Name="paneProperties" Caption="Properties">
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
</Grid>
</Window>