Category / Section
How to set the Header Background color on a TDI child in WPF DocumentContainer ?
1 min read
In DocumentContainer, you can set the header background color on a specific TDIDocument by using DocumentTabControlStyle and DocumentTabItemStyle. Refer to the following code example.
XAML
<Window.Resources> <LinearGradientBrush x:Key="Aero.TabBackgroundBrush" StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="#FFECF5FC" Offset="0" /> <GradientStop Color="#FF98B4D2" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> <local:SelectedTabItemBackgroudConverter x:Key="SelectedTabItemBackgroudConverter"></local:SelectedTabItemBackgroudConverter> </Window.Resources> <syncfusion:DocumentContainer x:Name="Doccontainer" Mode="TDI" > <syncfusion:DocumentContainer.DocumentTabControlStyle> <Style TargetType="syncfusion:DocumentTabControl"> <Setter Property="TabItemSelectedBackground" Value="{Binding Path=SelectedItem,RelativeSource={RelativeSource Self},Converter={StaticResource SelectedTabItemBackgroudConverter}}"></Setter> </Style> </syncfusion:DocumentContainer.DocumentTabControlStyle> <ContentControl x:Name="child1" syncfusion:DocumentContainer.Header="Document1" > <syncfusion:DocumentContainer.DocumentTabItemStyle> <Style TargetType="{x:Type TabItem}"> <Setter Property="Background" Value="Green"/> </Style> </syncfusion:DocumentContainer.DocumentTabItemStyle> </ContentControl> <ContentControl x:Name="child2" syncfusion:DocumentContainer.Header="Document2" > <TextBlock Text="This is a document2" /> </ContentControl> <ContentControl x:Name="child3" syncfusion:DocumentContainer.Header="Document3"/> <ContentControl x:Name="child4" syncfusion:DocumentContainer.Header="Document4"/> <ContentControl x:Name="child5" syncfusion:DocumentContainer.Header="Document5"/> </syncfusion:DocumentContainer>
C#
public class SelectedTabItemBackgroudConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { object background = (LinearGradientBrush)Application.Current.MainWindow.Resources["Aero.TabBackgroundBrush"]; if (value is TabItem) background = (value as TabItem).Background ?? background; return background; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return value; } }
The following screenshot displays setting the Header Background on specific TDI Document1 in DocumentContainer.