Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Collapse]Docking Library
   [Collapse]Panels and Panel Containers
     Dock Panels
     Working with Panel Containers
    Header Buttons
   [Expand]Managing Dock Panels in Code
    Saving and Restoring the Layout of Dock Panels
   [Expand]Examples
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Dock Panels

Expanded Add Panels by Using the Dock Manager Component

  1. Create a new WinForms application using the default Visual Studio template, or open an existing project.
  2. On the VS Toolbox, locate the DockManager component and drop it onto the project form.
  3. Click "Add Panel at..." links within the DockManager smart tag.

    Alternatively, you can invoke the DockManager customization dialog to add and remove panels, modify their visibility and other settings.

Expanded Add Panels by Using the Instant Layout Assistant Extension

  1. Create a new WinForms project and select the "DevExpress 17.1 Template Gallery" option to invoke the Template Gallery.

  2. Select the "Blank Application" template and click "Create Project".

  3. For this type of template the Layout Assistant Extension breaks the main form down into five regions. Links above each region allow you to quickly add DevExpress controls. Hover all regions except for the one in the middle and click "Wrap in Dock Panel".

  4. Click "Apply".

    This will result in adding four DockPanel objects and two components - DockManager (manages dock panels) and DocumentManager (emulates various application UI types).
  5. The DocumentManager component is not a part of the Docking Library and you can safely remove it for now. Select the component at design time and press "Delete" on your keyboard.

  6. Utilize the form smart tag to select a desired application skin and press "F5" to run the application.

Expanded Dock Panels: First Look

At runtime, you can test what dock panel features are available out-of-the-box.

  • Docking Hints
    Click a panel header and drag it away to undock this panel. As you do so, docking hints appear. You can drag a panel to a hint to dock this panel to a new location. The live preview will inform you of how the layout will look once you release the panel.

  • Floating Panels
    When dragging a panel, drop it outside docking hints. Such panels will remain floating. Double-clicking a panel header will also make this panel float.

  • Tabs
    To dock a panel as a tab, drag this panel to the middle of another panel. Click tab headers to switch between tabs, or drag these headers away to restore the panel’s initial state.

  • Panel Resize
    Both docked and floating panels can be resized. To do so, drag a panel border in the desired direction.

  • Auto-Hide Panels
    Clicking the pin button in the header of a docked panel places this panel into an auto-hide container. An auto-hidden panel collapses when not focused, leaving only its header visible. To restore the panel, click its pin button again.

  • Close and Maximize Buttons
    Floating panels can be maximized to occupy the entire screen. Close buttons are available for all panels.
    Tip

    Closed panels are not destroyed, you can access (and restore) them through the DockManager.HiddenPanels collection.


  • Interaction with the Document Manager Component
    If the application form also hosts the DocumentManager component, docking hints will look different. Also, it will be possible to dock panels to the DocumentManager client area as tabs.

Expanded Customize Panels

After you have tested default panel features, you can modify your initial layout and customize individual panels.

  • Smart Tags
    Each panel provides a smart tag that allows you to rename a panel, set its icon and quickly re-arrange this panel.

  • Design-Time Access
    You can utilize all runtime techniques at design time: drag panels to re-arrange them or make them floating, create tabs and auto-hide panels. This topic is described in the Working with Panel Containers article.

  • Hide and Remove Panels
    If you click a panel "Close" button at design time, the panel will be hidden but will not be disposed of. To make it visible again, change the DockPanel.Visibility property from Hidden to Visible.

    To completely remove a panel, select it at design time and press the "Delete" key.

  • Disable Runtime Features
    To disable specific runtime panel behavior, utilize the DockPanel properties accessible through the DockPanel.Options group. For example, you can prevent end-users from auto-hiding specific panels or docking them as tabs.

    Instead of doing this for each individual panel, you can disable an unwanted feature globally for all panels at once. To do so, access properties stored in the DockManager.DockingOptions group of the DockManager component.

Expanded Specify Panel Content

To place a control (or UserControl) inside a dock panel, drop the control onto the panel surface and set the control's Dock property to Fill. The figure below illustrates a panel with the Accordion Control within.

When browsing objects in the Visual Studio "Properties" window, you can notice that every panel has a corresponding ControlContainer object.

This object is the client area of a panel that hosts the panel content. Use this object's Controls collection to populate a dock panel in code.

Expanded The Panel Snapping Feature

Floating dock panels can snap to each other, their parent form and/or other elements that support the snap window behavior.

To activate this feature, utilize the DockingOptions.SnapMode property. You can also use the SnapMode property of a BarAndDockingController object. In this case, windows snapping will be enabled for both DockManager panels and DocumentManager documents.

Expanded See Also

How would you rate this topic?​​​​​​​