Advanced Layout of Dock Control for C# WinForms

The following is a tutorial that demonstrates how to create an advanced layout of ToolWindows and DocumentWindows in Windows Forms in C# code and how to display the built layout. In this tutorial, a floating window with 120 height and 260 width will hold two ToolWindows. The SizeInfo property of the TabStrip containers will be used. With the property, developers can configure the TabStrip in a precise size and set a relative size for TabStrip to keep 2 TabStrip in a specific size.

How to Build the Layout in C#

Drag and drop a Dock Control instance to a form. Change the property of Dock to Fill and subscribe to the Form_Load in which the windows layout will be implemented.

Create ToolWindows. The first ToolWindow will be docked left and the rest of ToolWindows will be docked left-bottom. The first one will be set to the target in the DockWindow method that will dock the second ToolWindow


ToolWindow window1 = new ToolWindow();
window1.Name = "window1";
this.dock1.DockWindow(window1, DockLocation.Left);
ToolWindow window2 = new ToolWindow();
window2.Name = "window2";
this.dock1.DockWindow(window2, window1, DockLocation.Bottom);

Set the height of the TabStrip of the second window relative to the height of the first one:


window2.TabStrip.SizeInfo.SizeMode = SplitPanelSizeMode.Relative;
window2.TabStrip.SizeInfo.RelativeRatio = new SizeF(0, 0.33f);

Now we need add another two windows and set the Width of TabStrip of the fourth window as an absolute value, 120 pixels, which will not change even if the width of the third one changed

Add another two ToolWindows and float the ToolWindows. Here, developers can customize the size and location of the form that will host the ToolWindows


ToolWindow window5 = new ToolWindow();
window5.Name = "window5";
this.dock1.FloatWindow(window5, new Rectangle(200, 200, 300, 250));
ToolWindow window6 = new ToolWindow();
window6.Name = "window6";
this.dock1.DockWindow(window6, window5, DockLocation.Right);

Add one more ToolWindow and automatically hide the ToolWindow to Top by setting the AutoHideLocation property of the TabStrip that hosts the ToolWindow.

Display the DocumentWindows by setting the property as Yes with the C# code below.

DocumentWindow document1 = new DocumentWindow();
document1.Name = "document1";
this.dock1.AddDocument(document1);
DocumentWindow document2 = new DocumentWindow();
document2.Name = "document2";
this.dock1.AddDocument(document2, document1, DockLocation.Bottom);

UI Controlsfor Windows Forms

.NET WinForms UI Overview .NET WinForms UI Features .NET WinForms UI Guide C# WinForms UI Design VB.NET WinForms UI Design

WinForms UI Controls

WinForms Buttons UI Control WinForms Calendar UI Control WinForms Carousel UI Control WinForms Chart UI Control WinForms Clock UI Control CommandBar UI Control WinForms Dock UI Control Dock - Getting Started

Architecture and Features

Arrange Windows Floating Windows Auto-Hide Windows Context Menu ReDock

Object Model