Docking Window in WPF Docking (DockingManager)

15 Jan 202412 minutes to read

Docking windows is one of the state of DockingManager. Since Dock is the default value, so initially all the children stay as Docking Window

WPF Docking Window

Configuring window in Different Sides

The five sides that can be docked are

  • Left
  • Right
  • Top
  • Bottom
  • Tabbed

To dock 4 children of a DockingManager in 4 different sides, then use SideInDockedMode property with the required values.

<ContentControl syncfusion:DockingManager.Header="Docking Left" syncfusion:DockingManager.SideInDockedMode= "Left" />

<ContentControl syncfusion:DockingManager.Header="Docking Top"  syncfusion:DockingManager.SideInDockedMode= "Top"/>

<ContentControl syncfusion:DockingManager.Header="Docking Right"  syncfusion:DockingManager.SideInDockedMode= "Right"/>

<ContentControl syncfusion:DockingManager.Header="Docking Bottom"  syncfusion:DockingManager.SideInDockedMode="Bottom" />
//Dock at Left

DockingManager.SetSideInDockedMode(dockWindow1, DockSide.Left);

//Dock at Top

DockingManager.SetSideInDockedMode(dockWindow2, DockSide.Top);

//Dock at Right

DockingManager.SetSideInDockedMode(dockWindow3, DockSide.Right);

//Dock at Bottom

DockingManager.SetSideInDockedMode(dockWindow4, DockSide.Bottom);

WPF Docking Window with Different Sides

Docking window in various Targets

Docking window can also be docked at any side of the Target Docking Window through an attached property named TargetNameInDockedMode.

Also to set as Tabbed Window, the window should aware of a Target window name. The following code helps to arrange children of DockingManager that targets a single Docking window docked along Left, Top, Right and Tabbed.

<ContentControl syncfusion:DockingManager.Header="Targeted Window" x:Name="DockingWindow1"/>

<!--Targeted to Docking Window1 on Top Side-->
<ContentControl syncfusion:DockingManager.Header="Top"
                syncfusion:DockingManager.SideInDockedMode="Top"
                syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

 <!--Targeted to DockingWindow1 on Right Side-->
<ContentControl syncfusion:DockingManager.Header="Right"
                syncfusion:DockingManager.SideInDockedMode="Right"
                syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

<!--Targeted to DockingWindow1 on Left Side-->
<ContentControl syncfusion:DockingManager.Header="Left"
                syncfusion:DockingManager.SideInDockedMode="Left"
                syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

<!--Targeted to DockingWindow to tab-->
<ContentControl syncfusion:DockingManager.Header="Tabbed"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
                syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>
dockWindow1.Name = "DockingWindow1";

DockingManager.SetTargetNameInDockedMode(dockWindow2, "DockingWindow1");

DockingManager.SetSideInDockedMode(dockWindow2, DockSide.Top);

DockingManager.SetTargetNameInDockedMode(dockWindow3, "DockingWindow1");

DockingManager.SetSideInDockedMode(dockWindow3, DockSide.Right);

DockingManager.SetTargetNameInDockedMode(dockWindow4, "DockingWindow1");

DockingManager.SetSideInDockedMode(dockWindow4, DockSide.Left);

DockingManager.SetTargetNameInDockedMode(dockWindow5, "DockingWindow1");

DockingManager.SetSideInDockedMode(dockWindow5, DockSide.Tabbed);

WPF Docking Window with Various Targets

NOTE

View Sample in GitHub

Maximize/Minimize Support

This feature helps to Maximize/Minimize Docked Windows for better usage of each window. This support is enabled only when the parent container of a specific element contains more than one host.

  • It helps a particular docked window to provide a maximized view
  • It can minimize a docked window and can be restored when needed

Enabling Maximization feature

To enable maximizing feature of Docking Window, set MaximizeButtonEnabled to True

<syncfusion:DockingManager MaximizeButtonEnabled="True">

<ContentControl syncfusion:DockingManager.Header="Solution Explorer"/>

<ContentControl syncfusion:DockingManager.Header="Toolbox"/>

</syncfusion:DockingManager>
SyncDockingManager.MaximizeButtonEnabled = true;

WPF Docking Maximization Feature

Limit Maximized Dock item

DockingManager has properties named DesiredMaxWidthInDockedMode and DesiredMaxHeightInDockedMode to limit the size and height respectively to the specific window.
Initially set MaximizeButtonEnabled to True and set values for DesiredMaxWidthInDockedMode and DesiredMaxHeightInDockedModeand the specific window will gets maximized based on the values respectively.

<syncfusion:DockingManager x:Name="SyncDockingManager" MaximizeButtonEnabled="True" >
            
<ContentControl syncfusion:DockingManager.Header="Solution Explorer" syncfusion:DockingManager.SideInDockedMode="Left"
                            syncfusion:DockingManager.DesiredMaxWidthInDockedMode="200" />
            
<ContentControl syncfusion:DockingManager.Header="Output" syncfusion:DockingManager.SideInDockedMode="Right"
                            syncfusion:DockingManager.DesiredMaxWidthInDockedMode="300"/>
            
<ContentControl syncfusion:DockingManager.Header="Error List" syncfusion:DockingManager.SideInDockedMode="Bottom"
                            syncfusion:DockingManager.DesiredMaxHeightInDockedMode="200"/>
            
</syncfusion:DockingManager>
SyncDockingManager.MaximizeButtonEnabled = true;

DockingManager.SetSideInDockedMode(dockWindow1, DockSide.Left);

DockingManager.SetSideInDockedMode(dockWindow2, DockSide.Right);

DockingManager.SetSideInDockedMode(dockWindow3, DockSide.Bottom);

DockingManager.SetDesiredMaxWidthInDockedMode(dockWindow1, 200);

DockingManager.SetDesiredMaxWidthInDockedMode(dockWindow2, 300);

DockingManager.SetDesiredMaxWidthInDockedMode(dockWindow3, 200);

WPF Docking Limit Maximization for Specific Children

Maximize Docking Window to full screen

MaximizeMode helps to change the maximization behavior of DockingWindow. Docking Windows occupies entire screen when MaximizeMode set as FullScreen and DockingWindow in the Maximized state.

<syncfusion:DockingManager MaximizeButtonEnabled="True" MaximizeMode="FullScreen"/>
SyncDockingManager.MaximizeButtonEnabled = true;

SyncDockingManager.MaximizeMode = MaximizeMode.FullScreen;

WPF Docking Window Maximize to Full Screen

Enabling Minimization feature

To enable minimizing feature of DockingWindow, set MinimizeButtonEnabled to True

<syncfusion:DockingManager x:Name="SyncDockingManager" MinimizeButtonEnabled="True">

<ContentControl x:Name="SolutionExplorer" syncfusion:DockingManager.Header="Solution Explorer"/>

<ContentControl x:Name="ToolBox" syncfusion:DockingManager.Header="Toolbox"/>

</syncfusion:DockingManager>
SyncDockingManager.MinimizeButtonEnabled = true;

WPF Docking Minimization Feature

Restrict Maximization or Minimization for a specific children

DockingManager provides two attached property named CanMaximize and CanMinimize to enable or disable Maximizing and Minimizing buttons respectively to the specific window.

<syncfusion:DockingManager MaximizeButtonEnabled="True" MinimizeButtonEnabled="True">

<ContentControl syncfusion:DockingManager.Header="Solution Explorer" syncfusion:DockingManager.CanMinimize="False" />

<ContentControl syncfusion:DockingManager.Header="Toolbox" syncfusion:DockingManager.CanMaximize="False"/>

</syncfusion:DockingManager>
SyncDockingManager.MinimizeButtonEnabled = true;

SyncDockingManager.MaximizeButtonEnabled = true;

//Restrict the minimize option for Solution Explorer window

DockingManager.SetCanMinimize(SolutionExplorer, false);

//Restrict the maximize option Toolbox window

DockingManager.SetCanMaximize(Toolbox, false);

WPF Docking Min and Max Restriction for Specific Children

Hot Drag the window

The DockWindow Header can be highlighted when the mouse is hovered on an active Docking window by IsEnableHotTracking property. Default value of IsEnableHotTracking is False, to enable this functionality turn its value to True.

<syncfusion:DockingManager x:Name="SyncDockingManager" IsEnableHotTracking="True"/>
SyncDockingManager.IsEnableHotTracking = true;

Enabling or Disabling the Dock functionality

The CanDock property can help to enable or disable the docking functionality by setting its value as True or False. By default its value is True, to disable this functionality turn its value to False.

<ContentControl syncfusion:DockingManager.CanDock="False" />
DockingManager.SetCanDock(dockWindow1, false);

Enabling or Disabling the Header Visibility

NoHeader is an attached property, that is used to hide the header of DockWindow. Default value of NoHeader is False, to hide the Header turn its value to True.

<ContentControl syncfusion:DockingManager.Header="Toolbox"/>

<!--NoHeader enabled to this child-->
<ContentControl syncfusion:DockingManager.Header="Solution Explorer" syncfusion:DockingManager.NoHeader="True" />
DockingManager.SetNoHeader(SolutionExplorer, true);

WPF Docking Header Visibility

Custom context menu items for docking window

You can add the custom context menu items for docking window by using the FloatWindowContextMenuItems property. You can also add sub menu items for custom context menu item by adding that sub CustomMenuItem to the parent CustomMenuItem. You can check or uncheck the CustomMenuItem interactively or programmatically by using the CustomMenuItem.IsChecked property.

You can collapse the default docking context menu and show only the custom docking context menu items by setting the CollapseDefaultContextMenuItemsInDock property to true. The default value of CollapseDefaultContextMenuItemsInDock property is false.

<syncfusion:DockingManager
    DockFill="True"
    Name="dockingManager" >
    
    <!--Adding custom context menu items for docking windows-->
    <syncfusion:DockingManager.DockWindowContextMenuItems>
        <syncfusion:CustomMenuItemCollection>
            <!--Adding custom context menu items-->
            <syncfusion:CustomMenuItem Header="Menu 1"/>
            <syncfusion:CustomMenuItem Header="Menu 2">

                <!--Adding sub custom context menu items-->
                <syncfusion:CustomMenuItem Header="SubMenu 1"/>
                <syncfusion:CustomMenuItem Header="SubMenu 2"/>
                <syncfusion:CustomMenuItem Header="SubMenu 3" IsChecked="True"/>
            </syncfusion:CustomMenuItem>
        </syncfusion:CustomMenuItemCollection>
    </syncfusion:DockingManager.DockWindowContextMenuItems>

    <ContentControl syncfusion:DockingManager.Header="Targeted Window" 
                    syncfusion:DockingManager.CollapseDefaultContextMenuItemsInDock="True"
                    x:Name="DockingWindow1"/>

    <!--Targeted to Docking Window1 on Bottom Side-->
    <ContentControl syncfusion:DockingManager.Header="Bottom"
        syncfusion:DockingManager.SideInDockedMode="Bottom"
        syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

    <!--Targeted to DockingWindow1 on Right Side-->
    <ContentControl syncfusion:DockingManager.Header="Right"
        syncfusion:DockingManager.SideInDockedMode="Right"
        syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

    <!--Targeted to DockingWindow1 on Left Side-->
    <ContentControl syncfusion:DockingManager.Header="Left"
        syncfusion:DockingManager.SideInDockedMode="Left"
        syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>

    <!--Targeted to DockingWindow to tab-->
    <ContentControl syncfusion:DockingManager.Header="Tabbed"
        syncfusion:DockingManager.SideInDockedMode="Tabbed"
        syncfusion:DockingManager.TargetNameInDockedMode="DockingWindow1"/>
</syncfusion:DockingManager>
//Creating custom context menu items
CustomMenuItem menu1 = new CustomMenuItem();
menu1.Header = "Menu 1";
CustomMenuItem menu2 = new CustomMenuItem();
menu2.Header = "Menu 2";

//Creating custom sub context menu items
CustomMenuItem customMenuItem1 = new CustomMenuItem() { Header = "SubMenu 1" };
CustomMenuItem customMenuItem2 = new CustomMenuItem() { Header = "SubMenu 2" };
CustomMenuItem customMenuItem3 = new CustomMenuItem() { Header = "SubMenu 3", IsChecked= true };

menu2.Items.Add(customMenuItem1);
menu2.Items.Add(customMenuItem2);
menu2.Items.Add(customMenuItem3);

//Adding custom context menu items with sub menu items
dockingManager.FloatWindowContextMenuItems.Add(menu1);
dockingManager.FloatWindowContextMenuItems.Add(menu2);

WPF Docking Custom Context Menu

NOTE

View Sample in GitHub