Articles in this section
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.


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