How to center AutoHidden tabs inside the SidePanel in WPF DockingManager

This article explains how to achieve vertical centering of AutoHidden tabs in the SidePanel of the WPF DockingManager using a combination of layout handling and template access.

Steps to Center AutoHidden Tabs

1. Define DockingManager and AutoHidden Items in XAML

Below is the XAML layout with two AutoHidden tabs docked to the right. The SidePanelSize property controls the width of the panel.

<Grid>
   <syncfusion:DockingManager
       x:Name="dockingManager"
       UseDocumentContainer="False"
       UseNativeFloatWindow="True"
       DockFill="True"
       SidePanelSize="80">

       <!-- Main content area -->
       <Grid x:Name="mainContent" syncfusion:DockingManager.NoHeader="True">
           <TextBlock Text="Main Application View"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center" />
       </Grid>

       <!-- AutoHidden tabs docked to the right -->
       <ContentControl x:Name="projectExplorerTab"
                       syncfusion:DockingManager.Header="Project Explorer"
                       syncfusion:DockingManager.State="AutoHidden"
                       syncfusion:DockingManager.SideInDockedMode="Right" />

       <ContentControl x:Name="propertiesTab"
                       syncfusion:DockingManager.Header="Properties"
                       syncfusion:DockingManager.State="AutoHidden"
                       syncfusion:DockingManager.SideInDockedMode="Right" />

   </syncfusion:DockingManager>
</Grid> 

2. Handle Layout in Code-Behind

In the code-behind, attach to the DockingManager.Loaded event and retrieve the internal SidePanel (in this case, the right panel). Once located, apply a layout update to center the AutoHidden tabs.

public MainWindow()
{
   InitializeComponent();
   dockingManager.Loaded += DockingManager_Loaded;
}

SidePanel rightSidePanel;

private void DockingManager_Loaded(object sender, RoutedEventArgs e)
{
   var panels = VisualUtils.EnumChildrenOfType(dockingManager, typeof(SidePanel));
   if (panels != null)
   {
       foreach (SidePanel panel in panels)
       {
           // Locate the right-side panel by its internal name
           if (panel.Name == "PART_RightPanel")
           {
               rightSidePanel = panel;
               rightSidePanel.FontSize = 20;
               rightSidePanel.FontWeight = FontWeights.Bold;
               rightSidePanel.LayoutUpdated += RightPanel_LayoutUpdated;
           }
       }
   }
}

private void RightPanel_LayoutUpdated(object sender, EventArgs e)
{
   // Access the internal tab panel from the control template
   DirectTabPanel tabPanel = rightSidePanel.Template.FindName("PART_PanelName", rightSidePanel) as DirectTabPanel;

   if (tabPanel != null)
   {
       tabPanel.VerticalAlignment = VerticalAlignment.Center;
       rightSidePanel.LayoutUpdated -= RightPanel_LayoutUpdated;
   }
} 

Output

The Project Explorer and Properties tabs appear vertically centered inside the right SidePanel.