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

Working with Panel Containers

You can combine DockPanels into split, tab, and auto-hide containers.

Expanded Common Container Features

All panel containers can emerge dynamically at runtime, as a result of docking operations performed by end-users or docking methods called from code. If the number of container child panels becomes less than it is allowed, this container is automatically disposed of.

Expanded Float Forms

Floating panels reside within dynamically generated FloatForm objects. To access these objects for individual floating panels, utilize the DockPanel.FloatForm property. For dock panels that belong to floating split and tab containers, this property will return nothing. In this case, use the DockPanel.FloatForm property of the container itself. To access the container, use the DockPanel.RootPanel property for a child panel.

Expanded Split Container

A DockPanel that contains one or more child panels, grouped side-by-side and divided by splitters.

Main Properties
Unlike regular panels, split containers' DockPanel.Count property value differs from zero and specifies the number of dock panels grouped within this container. The DockPanel.Dock property of all child panels inside a split container changes to DockingStyle.Fill.

Add a Split Container
To add a split container at design time or at runtime, dock one panel perpendicularly to another. For example, if panel "A" is docked vertically (the DockPanel.Dock property equals Left or Right), panel "B" must be docked to either the top or bottom side of panel "A". Otherwise, these will be two adjacent panels not united by a split container.

The same orientation rule applies when creating split containers in code. Use the DockPanel.DockTo method to combine panels.

Recognizing Split Containers. Panel Features
Dock panels that serve as split containers do not normally display their headers, borders, or any other visual elements. At first sight, this can be deceiving and make it hard to distinguish neighboring panels combined into a container from those that are not.

Split container child panels can be identified by the following unique features, not available for sole panels.
  • Panels owned by split containers display the "Maximize" button.

  • Split container child panels cannot be resized individually. Instead, the entire container is resized at once.

    Keep this in mind and do not attempt to resize in code individual panels that belong to a split container. Instead, utilize the DockPanel.ParentPanel property to retrieve a parent container and modify its size.
Floating Split Containers
Floating dock panels can also be grouped into split containers. In this scenario, you can dock a panel to either side of a floating panel. Also, unlike docked split containers, floating ones display their headers with captions.

You can change the orientation of dock panels inside a split container by utilizing this container's DockPanel.FloatVertical property.

Expanded Tab Container

A floating or docked DockPanel that presents its child panels as tabs. Clicking a tab header activates a related panel.

Main Properties
Child panels of a tab container have their DockPanel.Dock properties set to DockingStyle.Fill and their DockPanel.IsTab property returns true. To retrieve a currently selected tab, use the container's DockPanel.ActiveChild property.

Add a Tab Container
To create a tab container at either design time or runtime, drag a panel to a central docking hint of another panel. A tab container for both panels will be created automatically.

In code, call the DockPanel.DockAsTab method to create tabs. Alternatively, you can enable the DockPanel.Tabbed property of a split container to morph it into a tab container.

Container Header
A tab container has a visible header with text and default and/or custom header buttons. The header caption is represented by a string value stored within the DockPanel.Text property of a currently selected child panel.

Tab Headers
A tab header of a child panel can display a caption and an image (the DockPanel.TabText and DockPanel.Image properties). Use the DockPanel.TabsPosition property to align tab headers to either side of a tab container.

Expanded Auto-Hide Container

An object of the AutoHideContainer that contains one or more panels which are hidden when not focused. Hidden panels leave only their headers visible on screen. Clicking a header temporarily brings a panel on-screen.

Important

The auto-hide feature is not available if a DockManager component is hosted within an unmanaged window.


Main Properties
To access all currently existing auto-hide containers owned by this Dock Manager, use the DockManager.AutoHideContainers property.

Add and Remove Auto-Hide Containers
Non-floating dock panels display pin buttons by default. When end-users click this button, a panel gets inside an auto-hide container aligned to the same form edge the panel was docked to. If no auto-hide container is currently present, it will be created automatically.

In code, set the panel DockPanel.Visibility property to DockVisibility.AutoHide in order to place this panel in the nearest auto-hide container.

The maximum number of auto-hide containers that can be simultaneously present within a form is four (one along each side of the form).

To remove a panel from an auto-hide container, click the pin button again or drag the panel tab header away.

Additional Settings

Property

Description

DockingOptions.HideImmediatelyOnAutoHide Specifies whether panels are hidden immediately or with a certain delay with slight animation effects.
DockManager.AutoHideSpeed In case the panels are hidden slowly with slide animation effects applied, this property allows you to speed up this process or slow it down. The default speed value is 1.
DockManager.AutoHiddenPanelShowMode Gets or sets whether auto-hidden panels are shown on a mouse click or mouse hover.
DockManager.AutoHiddenPanelCaptionShowMode If you set this property to ShowForActivePanel, only active tabs of auto-hide containers will display both an image and text. Inactive tabs in turn will display only icons. This setting has no effect for tabs without icons.

Auto-Hiding Panel Containers
Since both split and tab containers are DockPanel objects, you can auto-hide them as well. Tab containers display headers with the same pin button as regular panels. Clicking this button adds the entire container to an auto-hide container. Similarly, clicking the pin button once again restores the container with all its tabs.

In their turn, non-floating split containers have no headers and end-users cannot auto-hide them. For this reason, setting a split container's DockPanel.Visibility property to DockVisibility.AutoHide produces unexpected behavior and is not recommended.

Expanded Customize Dynamically Created Containers

All panel containers can emerge and dispose dynamically at runtime, as a result of docking operations performed by end-users or docking methods called from code. The creation of split and tab containers fires the DockManager.RegisterDockPanel event. Handle it to perform required container modifications. For example, the code below detects the forming of a floating split container and changes its default "panelContainer" caption.

The following code sample illustrates how to change the header caption of a dynamically created tab container.

Auto-hide containers are not DockPanel objects and their creation should be tracked by using the DockManager.CreateAutoHideContainer event.

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