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

Dock Layout Manager

This tutorial explains how to work with the Dock Layout Manager.


Demo: Visual Studio Docking

Requires installation of WPF Subscription. Download

Expanded Add the Dock Layout Manager to a Form

Drag the DevExpress DockLayoutManager (see DockLayoutManager) from the Visual Studio Toolbox to the form.

Expanded Predefined Layouts

Right-click the Dock Layout Manager, select Create Default Layout, and choose one of the predefined layouts.

Predefined layouts: Simple, IDE, MDI.

Expanded Layout Panels

Create a Panel

Select the panel, expand the command group (+), and click the Add a new panel button.

The following XAML code will be generated:

Add Panel Content

To add a control to the panel, drag the control from the Toolbox to the panel

The following example adds the TextBox control to the Panel1:

Remove a Panel

Right-click the panel and select Delete.

Rearrange Panels (Drag and Drop)

Expanded Panel Groups

You can arrange panels into groups: Auto-Hide, Floating, Tabbed, and Document Group.

Auto-Hide Groups

Click the pin button in a docked panel header. The Dock Layout Manager creates the auto-hidden (see AutoHideGroup) group and adds the panel into it. Click the panel's pin button again to dock it.


Set the panel's AutoHideType attached property to specify the location of the auto-hide panel (when it is hidden).

Set the panel's AutoHideGroup.AutoHideSize dependency property to specify the panel size in auto-hide mode.

Floating Groups

Drop a panel outside docking hints or double-click a panel header to make a floating group (see FloatGroup).

Set the FloatingMode property to Desktop to allow end-users to drag floating panels outside the window.

Tabbed Groups

Drag a panel to the middle of another panel to create a tabbed group (see TabbedGroup). Click tab headers to switch between panels. Drag the panel's header outside the tabbed group to restore the panel.

Document Groups

Tabbed Style

Click the Add a new document group button to add a new document group. Tabbed style is the default style.

MDI Style

Set the Document Group's MDIStyle property to MDI to enable MDI mode.

Closed Panels

Use the DockLayoutManager.ClosedPanelsBarVisibility property to specify the Closed Panels bar visibility.

Expanded See Also

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