Articles in this section
Category / Section

How to change the size of the buttons in HeaderTabPanel in WPF DockingManager?

3 mins read

The size of the tab list, scroll and close button in the HeaderTabPanel can be changed by retrieving the buttons from the Template of TabPanel and update the values based on the AttachedProperty of TabPanelAdvExtension class in WPF DockingManager. The following code examples illustrate the same,

MainWindow.xaml:

<syncfusion:DockingManager x:Name="dockingmanager" UseDocumentContainer="True" local:TabPanelAdvExtension.CloseButtonSize="10 10" local:TabPanelAdvExtension.MenuButtonSize="10 10" local:TabPanelAdvExtension.TabButtonSize="10 10">
</syncfusion:DockingManager>

MainWindow.cs:

public partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponent();
    GeneratingItems();
  }
                                              
  private void GeneratingItems()
  {
    for(int i = 0; i < 5; i++)
    {
      ContentControl content = new ContentControl();
      content.Content = "Content of" + dockingmanager.Children.Count;
      DockingManager.SetHeader(content, "DocumentItem" + dockingmanager.Children.Count);
      DockingManager.SetState(content, DockState.Document);
      dockingmanager.Children.Add(content);
    }           
  }
}

TabPanelAdvExtension.cs:

public class TabPanelAdvExtension
{
  private static DocumentContainer container = null;
  private static Size value;
  private static DockingManager manager = null;
  public static Size GetCloseButtonSize(DependencyObject obj)
  {
    return (Size)obj.GetValue(CloseButtonSizeProperty);
  }
 
  public static void SetCloseButtonSize(DependencyObject obj, Size value)
  {
    obj.SetValue(CloseButtonSizeProperty, value);
  }
 
  // Using a DependencyProperty as the backing store for CloseButtonSize.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty CloseButtonSizeProperty = DependencyProperty.RegisterAttached("CloseButtonSize", typeof(Size), typeof(TabPanelAdvExtension), new PropertyMetadata(new Size(6, 8)));
 
  public static Size GetMenuButtonSize(DependencyObject obj)
  {
    return (Size)obj.GetValue(MenuButtonSizeProperty);
  }
 
  public static void SetMenuButtonSize(DependencyObject obj, Size value)
  {
    obj.SetValue(MenuButtonSizeProperty, value);
  }
 
  // Using a DependencyProperty as the backing store for MenuButtonSize.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty MenuButtonSizeProperty = DependencyProperty.RegisterAttached("MenuButtonSize", typeof(Size), typeof(TabPanelAdvExtension), new PropertyMetadata(new Size(6, 8)));
 
  public static Size GetTabButtonSize(DependencyObject obj)
  {
    return (Size)obj.GetValue(TabButtonSizeProperty);
  }
 
  public static void SetTabButtonSize(DependencyObject obj, Size value)
  {
    obj.SetValue(TabButtonSizeProperty, value);
  }
 
  // Using a DependencyProperty as the backing store for PreviousTabButtonSize.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty TabButtonSizeProperty = DependencyProperty.RegisterAttached("TabButtonSize", typeof(Size), typeof(TabPanelAdvExtension), new PropertyMetadata(new Size(6, 8), new PropertyChangedCallback(OnTabButtonSizeChanged)));
  private static void OnTabButtonSizeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  {
    manager = d as DockingManager;
    (manager.DocContainer as DocumentContainer).Loaded += Dockingmanager_Loaded;
    value = (Size)e.NewValue;
  }
 
  private static void Dockingmanager_Loaded(object sender, RoutedEventArgs e)
  {
    container = sender as DocumentContainer;
    if (container != null)
      TabPanelAdvExtension.UpdateButtonSize(manager, container, value);
  }
 
  public static void UpdateButtonSize(DockingManager manager, DocumentContainer container, Size size)
  {
    TabControlExt tab = VisualUtils.FindDescendant(container as Visual, typeof(DocumentTabControl)) as TabControlExt;
 
    if (tab != null)
    {
      TabPanelAdv tabpanel = tab.Template.FindName("PART_TabPanel", tab) as TabPanelAdv;
      if (tabpanel != null)
      {
        Border border = tabpanel.Template.FindName("Bord", tabpanel) as Border;
        if (border != null)
        {
          Decorator decorator = border.Child as Decorator;
          DockPanel panel = null;
          if (decorator == null)
          {
            panel = border.Child as DockPanel;
          }
          else if (decorator.Child is DockPanel)
          {
            panel = decorator.Child as DockPanel;
          }
          foreach (var child in panel.Children)
          {
            if (typeof(Button) == child.GetType())
            {
              Button button = tabpanel.Template.FindName((child as Button).Name, tabpanel) as Button;
              if (button != null && button.Visibility != Visibility.Collapsed)
                ChangeTabButtonSize(button, size);
            }
            else if (typeof(ToggleButton) == child.GetType())
            {
              ToggleButton togglebutton = tabpanel.Template.FindName((child as ToggleButton).Name, tabpanel) as ToggleButton;
              Path buttonpath = togglebutton.Template.FindName("pathButton", togglebutton) as Path;
              if (buttonpath != null && togglebutton.Name == "PART_CloseButton")
              {
                buttonpath.Width = (TabPanelAdvExtension.GetCloseButtonSize(manager)).Width;
                buttonpath.Height = (TabPanelAdvExtension.GetCloseButtonSize(manager)).Height;
              }
              else if (buttonpath != null && togglebutton.Name == "PART_MenuButton")
              {
                buttonpath.Width = (TabPanelAdvExtension.GetMenuButtonSize(manager)).Width;
                buttonpath.Height = (TabPanelAdvExtension.GetMenuButtonSize(manager)).Height;
              }
            }
          }
        }
      }
    }
  }
  private static void ChangeTabButtonSize(Button button, Size size)
  {
    Canvas canvas = button.Template.FindName("canvas", button) as Canvas;
    if (canvas != null)
    {
      canvas.Height = size.Height;
      canvas.Width = size.Width;
      foreach (Path path in canvas.Children)
      {
        path.Stretch = Stretch.Fill;
        path.Width = size.Width;
        path.Height = size.Height;
      }
    }
  }
}

The following screenshot show the default size of the TabButton, MenuButton and CloseButton of the HeaderTabPanel

WPF DockingManager displays default size of tab button

The following screenshot shows the modified size of the buttons

Modified tab button size in WPF DockingManager

View sample in GitHub.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied