How to Center AutoHidden Tabs in 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.

Conclusion

I hope you enjoyed learning about How to Center AutoHidden Tabs in the SidePanel in WPF DockingManager.

You can refer to our WPF PDF Docking page to learn about its other groundbreaking features and documentation, as well as how to quickly get started with configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!