Drag and Drop

The Drag and Drop compatibilities of the RadDocking control allow you to re-arange the panes in a complete WYSIWYG manner. When the process of dragging starts, the Compass menu appears to help you dock/undock your panes.

Below you can find several step-by-step tutorials for the most common operations that can be accomplished via drag and drop.

Find out how to implement conditional docking using PreviewShowCompass event exposed by RadDocking.

Docking Panes to a Container

  1. Click on the pane's header and start dragging it to the container you wish to dock your pane to.

  2. As soon as your mouse enters a container, the Compass appears right in its middle.

  3. While keeping the mouse button down, position your mouse cursor over the compass indicator that points to the area you wish to dock your pane to. Notice how the possible Dropping Area is highlighted.

  4. Drop the pane and see how it is docked in the highlighted area.

    Docking Panes to a Container

As you can see you have dragged your pane over the Compass' right indicator which leads to highlighting the respective dropping area inside the underlying container.

Note that the Compass menu always marks the possible docking positions within the container your mouse cursor is currently over.

Docking Panes to the Root Container

  1. Click on the pane's header and start dragging it.

  2. The Root Compass appears.

  3. While keeping the mouse button down, position your mouse cursor over the root compass indicator that points to the area you wish to dock your pane to. Notice how the possible Dropping Area is highlighted.

  4. Drop the pane and see how it is docked in the highlighted area.

    Docking Panes to the Root Container

Note that the Root Compass always marks the possible docking positions only for the root container.

Adding Panes to Tabbed Documents

  1. Click on the pane's header and start dragging it to the container you wish to dock your pane to.

  2. As soon as your mouse enters a container, the Compass appears right in its middle.

  3. While keeping the mouse button down, position your mouse cursor over the compass' center indicator. Notice how the whole container is highlighted as Dropping Area.

  4. Drop the pane and see how it is docked as a new tab.

    Adding Panes to Tabbed Documents

To dock a pane to a Tabbed Document, drag and drop it over the center indicator of the Compass.

Undocking Panes

  1. Click on the docked pane's header and start dragging it.

  2. While keeping the mouse button down, position your mouse cursor outside any Compass elements.

  3. Drop the pane and notice that it is undocked and placed as a separate window (ToolWindow).

    Undocking Panes

To undock a pane and make it floatable, just drag it out of its current place and drop it outside any compass indicator.

Use Native ToolWindow Drag

As of R1 2020 SP1, the RadDocking control exposes a UseNativeInitialToolWindowDrag property through which you can set to True to use the native Windows drag operation when first undocking a pane/group. This is useful if you wish to be able to use the Windows Snap Assist feature or take into account the "Show window contents while dragging" Windows setting.

Example 1: Enable Native ToolWindow Drag

<telerik:RadDocking x:Name="radDocking" UseNativeInitialToolWindowDrag="True"> 
    <!-- ... --> 
</telerik:RadDocking> 
Use Native ToolWindow Drag

See Also

In this article
Not finding the help you need? Improve this article