Floating Window in UWP Docking (SfDockingManager)

15 Jul 20262 minutes to read

Floating window is one of the states in the SfDockingManager. To make children of the SfDockingManager as Float, set the SfDockingManager child’s DockState values as Float.

<layout:SfDockingManager>

<ContentControl layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.DockState="Float"/>

</layout:SfDockingManager>

Floating-Window-img1

Enabling or Disabling the Float functionality

The CanFloat attached property helps to enable or disable the floating functionality by setting its value as true or false respectively. By default, the CanFloat value is true. This functionality can be disabled by setting its value as false. When setting the CanFloat property as false, it disables the dragging functionality of the dock window, so changing the window position via mouse interaction will be restricted. The dock window position can still be changed through code-behind.

<layout:SfDockingManager>

<ContentControl Name="SolutionExplorer" layout:SfDockingManager.Header="SolutionExplorer"
                layout:SfDockingManager.CanFloat="false"/>

<ContentControl Name="ToolBox" layout:SfDockingManager.Header="ToolBox"
                layout:SfDockingManager.CanFloat="false"/>
                
<ContentControl Name="ErrorList" layout:SfDockingManager.Header="ErrorList"
                layout:SfDockingManager.CanFloat="false"/>

</layout:SfDockingManager>

Change Dock Window position through code behind

By using the SetSideInDockedMode method, we can set the side and SetTargetNameInDockedMode method for changing the target of desired dock window.

SfDockingManager.SetSideInDockedMode(ToolBox, Dock.Tabbed);
 
SfDockingManager.SetTargetNameInDockedMode(ToolBox, "SolutionExplorer");
 
SfDockingManager.SetSideInDockedMode(ErrorList, Dock.Top);

Positioning on Desired Location

The FloatWindow can be placed at any desired location. To position the FloatWindow at the desired location with the required rectangle bounds, invoke the SetFloatingWindowRect method of the SfDockingManager.

<layout:SfDockingManager x:Name="docking">

<ContentControl x:Name="child1" layout:SfDockingManager.Header="SolutionExplorer"
                                layout:SfDockingManager.DockState="Float"/>

</layout:SfDockingManager>
SfDockingManager.SetFloatingWindowRect(child1, new Rect(200, 0, 200, 200));

Floating-Window-img2