How to create a complex layout of dock panels

• Jun 07, 2019
• 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.

Window1.xaml

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

Window1.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace CreateLayoutGroups
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CreateLayoutGroups {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}