Articles in this section
Category / Section

How to apply different style for document tab item header in WPF DockingManager?

1 min read

To apply the style for the DocumentTabItem, the DocumentTabItemStyle property of WPF DockingManager can be used. The same has been illustrated in the following code snippet:

XAML:

<Window x:Class=”_dockingincident.MainWindow"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
                 Title="MainWindow" Height="350" Width="525">
     <Grid x:Name="Grid1">
         <syncfusion:DockingManager x:Name="Dockingmanager1"  UseDocumentContainer="True" Grid.Row="1" >
             <syncfusion:DockingManager.DocumentTabControlStyle>
                 <Style TargetType="{x:Type syncfusion:DocumentTabControl}">
                      <Setter Property="TabItemSelectedBackground" Value="Green" />
                 </Style>
             </syncfusion:DockingManager.DocumentTabControlStyle>
             <ContentControl x:Name="content1"  syncfusion:DockingManager.Header="Child1"  syncfusion:DockingManager.State="Document">
                  <syncfusion:DockingManager.DocumentTabItemStyle>
                      <Style TargetType="{x:Type syncfusion:TabItemExt}">
                          <Setter Property="Background" Value="Red"/>
                          <Setter Property="HoverBackground" Value="Transparent"/>
                      </Style>
                   </syncfusion:DockingManager.DocumentTabItemStyle>
              </ContentControl>
              <ContentControl x:Name="content2" syncfusion:DockingManager.Header="Child2" syncfusion:DockingManager.State="Document">
                  <syncfusion:DockingManager.DocumentTabItemStyle>
                      <Style TargetType="{x:Type syncfusion:TabItemExt}">
                          <Setter Property="Background" Value="Blue"/>
                          <Setter Property="HoverBackground" Value="Transparent"/>
                      </Style>
                   </syncfusion:DockingManager.DocumentTabItemStyle>
               </ContentControl>
          </syncfusion:DockingManager>
     </Grid>
</Window>

C#:

using Syncfusion.Windows.Tools.Controls;
namespace _dockingincident
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      DockingManager DockingManager1 = new DockingManager();
      DockingManager1.UseDocumentContainer = true;
      Style style = new Style(typeof(TabControlExt));
      SolidColorBrush brush = new SolidColorBrush();
      brush.Color = Colors.Green;
      style.Setters.Add(new Setter(TabControlExt.TabItemSelectedBackgroundProperty, brush));
      DockingManager.SetDocumentTabControlStyle(DockingManager1, style);
      ContentControl content1 = new ContentControl();
      DockingManager.SetHeader(content1, "Child1");
      DockingManager.SetState(content1,DockState.Document);
      ContentControl content2 = new ContentControl();
      DockingManager.SetHeader(content2, "Child2");
      DockingManager.SetState(content2, DockState.Document);
      DockingManager1.Children.Add(content1);
      DockingManager1.Children.Add(content2);
      Style style1 = new Style(typeof(TabItemExt));
      SolidColorBrush brush1 = new SolidColorBrush();
      brush1.Color = Colors.Red;
      style1.Setters.Add(new Setter(TabItemExt.BackgroundProperty, brush1));
      style1.Setters.Add(new Setter(TabItemExt.HoverBackgroundProperty, brush1));
      style1.Setters.Add(new Setter(TabItemExt.IsSelectedProperty, false));
      DockingManager.SetDocumentTabItemStyle(content1, style1);
      Style style2 = new Style(typeof(TabItemExt));
      SolidColorBrush brush2 = new SolidColorBrush();
      brush2.Color = Colors.Red;
      style1.Setters.Add(new Setter(TabItemExt.BackgroundProperty, brush2));
      style1.Setters.Add(new Setter(TabItemExt.HoverBackgroundProperty, brush2));
      style1.Setters.Add(new Setter(TabItemExt.IsSelectedProperty, false));
      DockingManager.SetDocumentTabItemStyle(content2, style2);
      Grid1.Children.Add(DockingManager1);
    }
  }
}

The following screenshot shows how the style for DocumentTabItemHeader applied using DocumentTabItemStyle of DockingManager

            WPF DockingManager displays different style of tab items

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