Dock Panels

  • 6 minutes to read

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.

    Docking2017 - Add More Panels

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

    Docking2017 - Customization Dialog

Add Panels by Using the Instant Layout Assistant Extension

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

    Docking2017 - Invoke Template Gallery

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

    Docking2017 - Blank App Template

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

    Docking2017 - ILA Wrap in Panel

  4. Click "Apply".

    Docking2017 - ILA 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.

    Docking2017 - Form Tag Select Skin

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.

    Docking2017 - Docking Hints

  • Dock panels to the container center

    Starting with version 19.2, you and your users can dock panels to the container's central area.

    addDT

    To disable this behavior, set the DockingOptions.AllowDockToCenter property to DefaultBoolean.False.

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

    Docking2017 - Floating Panel

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

    Docking2017 - Tabs Animation

  • Panel Resize

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

    Docking2017 - Panel Resize

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

    Docking2017 - AutoHide Animation

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

    Docking2017 - Dock to DocumentManager

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.

    Docking2017 - Panel Smart Tag

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

    Docking2017 - Panel Visibility

    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.

    Docking2017 - Individual Panel Options

    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.

    Docking2017 - Global Panel Options

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.

Docking2017 - Panel with Accordion

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

Docking2017 - Panels and Containers

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.


dockPanel1.ControlContainer.Controls.Add(new ucPanelContent() {
    Dock = DockStyle.Fill
});

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.

Docking2017 - Panel Snapping

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.


dockManager1.Controller.PropertiesDocking.SnapMode = DevExpress.Utils.Controls.SnapMode.All;

Panel Z-Order Index

Dock panels have the highest Z-order index and are shown on top of other controls. The following controls have a higher Z-order index than panels and are displayed above them:

All these types are stored in the DockManager.TopZIndexControls collection. If you want to display another control above dock panels (a standard control or an object of a custom class that is derived from one of aforementioned types), add its type to this collection.

Add new types to the TopZIndexControls collection

dockManager1.TopZIndexControls.Add("MyApp.CustomRibbonControl");

//RibbonControl descendant
public class CustomRibbonControl : DevExpress.XtraBars.Ribbon.RibbonControl {
    protected override RibbonBarManager CreateBarManager() {
        return base.CreateBarManager();
    }
}
See Also