Skip to main content
You are viewing help content for a version that is no longer maintained/updated.
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 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:

    LayoutGroup

    View Example

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