windowsforms-1244-controls-and-libraries-docking-library-panels-and-panel-containers-dock-panels.md
Create a new WinForms project and select the “DevExpress 25.2 Template Gallery” option to invoke the Template Gallery.
Select the “Blank Application” template and click “Create Project”.
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”.
Click “Apply”.
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.
Utilize the form smart tag to select a desired application skin and press “F5” to run the application.
At runtime, you can test what dock panel features are available out-of-the-box.
Docking Hints
Dock panels to the container center
Floating Panels
Tabs
Panel Resize
Auto-Hide Panels
Close and Maximize Buttons
Interaction with the Document Manager Component
Context Menu
After you have tested default panel features, you can modify your initial layout and customize individual panels.
Each panel provides a smart tag that allows you to rename a panel, set its icon and quickly rearrange this panel.
You can utilize all runtime techniques at design time: drag panels to rearrange them or make them floating, create tabs and auto-hide panels. This topic is described in the Working with Panel Containers article.
If you click a panel “Close” button at design time, the panel will be hidden but not permanently destroyed. 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.
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.
Use the dock panel’s Appearance property to access and customize its appearance settings. The Appearance.BorderColor property specifies the background color of the panel’s header. The Appearance.BackColor property specifies the panel’s background color.
Tip
Use the dock manager’s Style property to specify the style of dock panels. Options include: Light and Classic.
using System.Drawing;
using DevExpress.LookAndFeel;
using DevExpress.XtraBars.Docking2010.Views;
// ...
public Form1() {
InitializeComponent();
dockPanel1.Appearance.BackColor = Color.FromArgb(255, 244, 192);
dockPanel1.Appearance.BorderColor = DXSkinColors.FillColors.Warning;
dockPanel1.Appearance.Options.UseBackColor = true;
dockPanel1.Appearance.Options.UseBorderColor = true;
dockManager1.Style = DockingViewStyle.Light;
}
Imports System.Drawing
Imports DevExpress.LookAndFeel
Imports DevExpress.XtraBars.Docking2010.Views
' ...
Public Sub New()
InitializeComponent()
dockPanel1.Appearance.BackColor = Color.FromArgb(255, 244, 192)
dockPanel1.Appearance.BorderColor = DXSkinColors.FillColors.Warning
dockPanel1.Appearance.Options.UseBackColor = True
dockPanel1.Appearance.Options.UseBorderColor = True
dockManager1.Style = DockingViewStyle.Light
End Sub
The screenshot below illustrates the result:
You can use the BarAndDockingController to customize the appearance of all dock panels:
barAndDockingController1.AppearancesDocking.PanelCaption.FontStyleDelta = FontStyle.Italic;
barAndDockingController1.AppearancesDocking.Panel.BackColor = Color.Orange;
barAndDockingController1.AppearancesDocking.PanelCaption.FontStyleDelta = FontStyle.Italic
barAndDockingController1.AppearancesDocking.Panel.BackColor = Color.Orange
Drop the control onto the panel surface and set the control’s Dock property to Fill to place a control (or UserControl) inside a dock panel. The figure below illustrates a panel that contains the Accordion Control.
When you browse objects in the Visual Studio “Properties” window, 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.
dockPanel1.ControlContainer.Controls.Add(new ucPanelContent() {
Dock = DockStyle.Fill
});
dockPanel1.ControlContainer.Controls.Add(New ucPanelContent() With {
.Dock = DockStyle.Fill
})
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.
dockManager1.Controller.PropertiesDocking.SnapMode = DevExpress.Utils.Controls.SnapMode.All;
dockManager1.Controller.PropertiesDocking.SnapMode = DevExpress.Utils.Controls.SnapMode.All
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 the aforementioned types), add its type to this collection.
dockManager1.TopZIndexControls.Add("MyApp.CustomRibbonControl");
//RibbonControl descendant
public class CustomRibbonControl : DevExpress.XtraBars.Ribbon.RibbonControl {
protected override RibbonBarManager CreateBarManager() {
return base.CreateBarManager();
}
}
dockManager1.TopZIndexControls.Add("MyApp.CustomRibbonControl")
'RibbonControl descendant
Public Class CustomRibbonControl
Inherits DevExpress.XtraBars.Ribbon.RibbonControl
Protected Overrides Function CreateBarManager() As RibbonBarManager
Return MyBase.CreateBarManager()
End Function
End Class
See Also