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