Enable Docking and Floating

In This Topic

DockingTab lets you to create docking and floating tab pages that can be dragged interactively around to make them float over any location. The control also allows you to tear off individual tab pages and automatically dock them to one of the other sides of the form, to another DockingTab control, or even float in a separate tool window.

The image below shows the DockingTab application at runtime.

DockingTab application UI

To observe the docking and floating behavior of the tab pages, select any one of the tab pages with your mouse and drag it anywhere on the form or screen.

The image below showcases the floating tabpages.

Floating individual tabs in application UI

Note: You can use the C1CommandDock property FloatHide to control how the C1DockingTabPage behaves at run-time. This property allows you to choose to keep focus on the tab pages when the application loses focus. There are three possible settings for C1CommandDock.FloatHide: Default, Never, or FocusLost.

Set Centre Tab Width

In C1CommandDock, the floating tabpages can be docked using Left, Top, Right, Bottom, and Diamond anchors. When docking the tabpages in the container, existing tabs may become hidden due to the space occupied by the new tab. In such scenarios, C1CommandDock allows you to set a minimum tab size for existing tabs through CentralTabMinimumSize property available in C1CommandDock class. The CentralTabMinimumSize accepts a non-negative value, either as a percentage or an absolute value. The percentage value specifies the minimum space reserved for the existing tabs as a proportion of the parent container, whereas absolute value specifies the space in terms of pixels.

Note: The CentralTabMinimumSize property requires at least two tabpages present in container while a new tab is docked in that area.

The image below illustrates how the CentralTabMinimumSize property preserves space for the existing tabs in C1CommandDock while new tab is being docked.

Dockingtab-minimum central tab minimum size

The below code snippet illustrates setting the CentralTabMinimumSize property with value 150px for central tabs in C1CommandDock.

C#	Copy Code
c1CommandDock1.CentralTabMinimumSize.WidthType = SizeType.Absolute; c1CommandDock1.CentralTabMinimumSize.Width = 150;

Anchors in Floating Tabs

When a tab is detached from the main host window, it becomes an independent host window. This new window functions like the original, allowing additional tabs to be added and supports all docking (anchoring) operations, similar to the original host window.

The below GIF illustrates support of all docking operations in the new host window:

Docking Tab New Host window all Anchors

To enable docking operations in the new host window, use the FloatingWindowOptions property of C1DockingManager Class. Follow the below steps to enable all docking operations in floating window:

Add the C1DockingManager from the ToolBox onto the form. Observe that the C1DockingManager component is added to the component tray.

Switch to the code window, use the below code to enable all docking operation in the floating window:

C#	Copy Code
c1DockingManager1.FloatingWindowOptions.AllowedAnchors = C1.Win.Command.AllowedAnchors.All;