[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Collapse]Dock Windows
    [Collapse]Getting Started
      Dock Layout Manager
      Dock and Layout Object Hierarchy
      How to create a simple layout of dock panes
    [Expand]Dock Items
    [Expand]Layout Items
    [Expand]Runtime Features
   [Expand]Tile and Layout
   [Expand]Tab Control
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to create a simple layout of dock panes

In this walkthrough, we'll create a simple layout of dock panes, shown in the following image.

This example shows how to define the layout of dock panes in XAML. We'll create five dock panes:

  • Toolbox represents a regular dock pane, docked to the left.
  • Properties is an auto-hidden dock pane.
  • Messages is a floating dock pane.
  • Document 1 and Document 2 are two tab pages, representing the main region of the application.

Expanded Walkthrough

  1. Create a new WPF Application and open the Window1.xaml file in the Designer.
  2. Add a DockLayoutManager component to the window. This can be performed by dragging the DockLayoutManager component from the Toolbox.

    The DockLayoutManager represents a container for dock panes. This is the component you work with to add the docking functionality to your application.

    Set the DockLayoutManager.Margin property to 12. This will make the DockLayoutManager occupy the entire window with an empty space around it.

    Your XAML may look like the following. If it doesn't, you can overwrite your code with the following:

    You can overwrite your Window1.xaml file with this code without dragging a DockLayoutManager component to the window. However, in this instance, you need to manually add the following libraries to the References section of your project: DevExpress.Data, DevExpress.Xpf.Bars, DevExpress.Xpf.Core, DevExpress.Xpf.Docking and DevExpress.Xpf.Layout.Core.

  3. First, to add the docking functionality to the application, add a root LayoutGroup object to the DockLayoutManager. Overwrite the content of the Window1.xaml file with the following XAML markup:

    The root LayoutGroup represents the root container for dock panes and dock pane groups (regular, tabbed or document groups). Note that auto-hidden and floating panes will not be added to the root LayoutGroup. They will be added to the DockLayoutManager's corresponding collections.

    Setting the LayoutGroup.Orientation property to Horizontal ensures that the LayoutGroup's children will be arranged horizontally.

  4. Add a Toolbox dock pane, which will be docked at the left edge of the root LayoutGroup.

    Dock panes are represented by the LayoutPanel class, so add a LayoutPanel object to the root LayoutGroup, as shown below:

  5. Add a container to the root LayoutGroup, which will occupy its central section. The container will display the Document 1 and Document 2 tab pages.

    To emulate the Visual Studio document tabbed interface using DXDocking, add a DocumentGroup object to the root LayoutGroup. The DocumentGroup's children (DocumentPanel objects) are represented as tab pages.

    Use the following code to add a DocumentGroup with two DocumentPanel objects:

    As you see, each DocumentPanel page displays a RichTextBox control.

  6. Add a Properties auto-hidden dock pane.

    To create an auto-hidden panel, first add an AutoHideGroup object to the DockLayoutManager.AutoHideGroups collection. Then, add a new LayoutPanel object to this group. Insert the following code in your Window1.xaml file before the </dxdo:DockLayoutManager> line:


    It's not possible to add dock pane groups to an AutoHideGroup. You can add only regular LayoutPanel objects to the AutoHideGroup.

  7. Add a Messages floating dock pane.

    To create a floating dock pane, first add a FloatGroup object to the DockLayoutManager.FloatGroups collection. Then, add a new LayoutPanel object to this group. Insert the following code in your Window1.xaml file before the </dxdo:DockLayoutManager> line:

    You can also add regular and tabbed groups of LayoutPanel objects to a FloatGroup.

  8. Now, you can run the application and see the result.

Expanded Complete Code

Is this topic helpful?​​​​​​​