Tabbed Window in WPF Docking (DockingManager)

31 Oct 20228 minutes to read

Child window can be arranged as Tabbed windows by setting TargetName and side value as Tabbed using the property SideInDockedMode.

WPF Docking Tabbed Window

Tab alignments

The tabs of the Docked window are placed at the bottom, by default. To place the tabs of the docked window at different sides set the property DockTabAlignment with desired values such as Top, Bottom, Left and Right.

  • DockTabAlignment as Bottom

WPF Docking Bottom TabAlignment

  • Setting DockTabAlignment as Left.

    <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Left">
  
<ContentControl  syncfusion:DockingManager.Header="Item1" x:Name="TabbedWindow1" />
  	
<ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/> 
  
</syncfusion:DockingManager>
    DockingManager1.DockTabAlignment = Dock.Left;

WPF Docking Left TabAlignment

  • Setting DockTabAlignment as Right

    <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Right">
  
<ContentControl syncfusion:DockingManager.Header="Item1"  x:Name="TabbedWindow1"/>  
  
<ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>
  				
</syncfusion:DockingManager>
    DockingManager1.DockTabAlignment = Dock.Right;

WPF Docking Right TabAlignment

  • Setting DockTabAlignment as Top

    <syncfusion:DockingManager x:Name="DockingManager1" DockTabAlignment="Top">
  
<ContentControl  syncfusion:DockingManager.Header="Item1" x:Name="TabbedWindow1"/> 
  
<ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>  
  
</syncfusion:DockingManager>
    SyncDockingManager.DockTabAlignment = Dock.Top;

WPF Docking Top TabAlignment

Closing a Tabbed window

Tabbed window provides two different closing behaviors. They are CloseActive and CloseAll modes of CloseTabs property.

CloseActive – Used to close the active element of Tabbed window.

<syncfusion:DockingManager x:Name="DockingManager1" CloseTabs="CloseActive">

<ContentControl syncfusion:DockingManager.Header="Item1" x:Name="TabbedWindow1" />  

<ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>  

<ContentControl syncfusion:DockingManager.Header="Item3" x:Name="TabbedWindow3"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>                         

</syncfusion:DockingManager>
//To close the active element of Tabbed window.

SyncDockingManager.CloseTabs = CloseTabsMode.CloseActive;

CloseAll – Used to close all the Tabbed window.

<syncfusion:DockingManager x:Name="DockingManager1" CloseTabs="CloseAll">

<ContentControl syncfusion:DockingManager.Header="Item1" x:Name="TabbedWindow1"/>  

<ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>  

<ContentControl syncfusion:DockingManager.Header="Item3" x:Name="TabbedWindow3"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
				syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>                         

</syncfusion:DockingManager>
//To close all the Tabbed window.

SyncDockingManager.CloseTabs = CloseTabsMode.CloseAll;

Tabbed window order changed notification

You will be notified when the tabbed window’s order is changed by using the TabOrderChanged event. You can get the order changed tabbed window with its old and new index values by using the TargetItem, OldIndex and NewIndex properties.

NOTE

The TabOrderChanged event occurs only during drag and drop operation. Not occurs when add or remove items interactively or using code behind.

<syncfusion:DockingManager TabOrderChanged="DockingManager1_TabOrderChanged"  
                           DockTabAlignment="Bottom"
                           x:Name="dockingManager1">
    <ContentControl syncfusion:DockingManager.Header="Item1" x:Name="tabbedWindow1" />
    <ContentControl syncfusion:DockingManager.Header="Item2" x:Name="tabbedWindow2"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="tabbedWindow1"/>
    <ContentControl syncfusion:DockingManager.Header="Item3" x:Name="tabbedWindow3"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="tabbedWindow2"/>
</syncfusion:DockingManager>
dockingManager1.DockTabAlignment = Dock.Bottom;
dockingManager1.TabOrderChanged += DockingManager1_TabOrderChanged;

You can handle the event as follows,

private void DockingManager1_TabOrderChanged(object sender, TabOrderChangedEventArgs e)
{
    var dragged_Item = e.TargetItem;
    var oldIndex = e.OldIndex;
    var newIndex = e.NewIndex;
}

WPF Docking Tabbed Window Order Changed

NOTE

View Sample in GitHub

Restrict tabbed window reordering

If you want to restrict the user to reordering the tabbed window by drag and drop operation, use the TabOrderChanging event and set Cancel property value as true.

NOTE

The TabOrderChanging event occurs only during drag and drop operation. Not occurs when add or remove items using code behind.

<syncfusion:DockingManager TabOrderChanging="DockingManager1_TabOrderChanging"
                           DockTabAlignment="Bottom"
                           x:Name="DockingManager1">
    <ContentControl  syncfusion:DockingManager.Header="Item1" x:Name="TabbedWindow1" />
    <ContentControl syncfusion:DockingManager.Header="Item2" x:Name="TabbedWindow2"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow1"/>
    <ContentControl syncfusion:DockingManager.Header="Item3" x:Name="TabbedWindow3"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="TabbedWindow2"/>
</syncfusion:DockingManager>
dockingManager1.DockTabAlignment = Dock.Bottom;
dockingManager1.TabOrderChanging += DockingManager1_TabOrderChanging;

You can handle the event as follows,

private void DockingManager1_TabOrderChanging(object sender, Syncfusion.Windows.Tools.Controls.TabOrderChangedEventArgs e)
{
    // Restrict the Tab item order changing
    e.Cancel = true;

    var dragged_Item = e.TargetItem;
    var oldIndex = e.OldIndex;
    var newIndex = e.NewIndex;
}

WPF Docking Restrict Tabbed Window Reordering

NOTE

View Sample in GitHub