How to change WPF TabItem foreground text with embedded text?

Question

I am looking for TabItem text to be changed before modifying TabItem. I used the following, which worked fine until I changed the type of content displayed on the tab:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Header="TabItem" Style="{DynamicResource SidebarTab}" />
</TabControl>

<Style x:Key="SidebarTabForegroundStyleSelected">
    <Setter Property="TextBlock.Foreground" Value="White" />
</Style>

<Style x:Key="SidebarTabForegroundStyle">
    <Setter Property="TextBlock.Foreground" Value="Black" />
</Style>

<Style x:Key="SidebarTab" TargetType="TabItem">
    <Setter Property="Padding" Value="10,12,2,12" />
    <Setter Property="BorderThickness" Value="0,1,0,1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border Padding="{TemplateBinding Padding}" 
                    Name="tab" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{StaticResource SidebarTabBorderBrush}"
                    SnapsToDevicePixels="True">
                    <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                        <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                        <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

When I changed TabItem to:

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabItem Style="{DynamicResource SidebarTab}">
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16" Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem" Margin="5,0,0,0" VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
    </TabItem>
</TabControl>

White will no longer be highlighted in the foreground of the text if the tab is selected, and back to black when the tab is no longer selected. Everything else still works correctly.

Does anyone know if there is a way to do the foreground color change in XAML above?

Answer 1

Move the cursor from the control template to the style:

<Grid>
    <Grid.Resources>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Gray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Blue"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="LightGray"></SolidColorBrush>
        <SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Green"></SolidColorBrush>

        <Style x:Key="SidebarTab" TargetType="TabItem">
            <Setter Property="Padding" Value="10,12,2,12" />
            <Setter Property="BorderThickness" Value="0,1,0,1" />
            <Setter Property="Foreground"  Value="Blue"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Padding="{TemplateBinding Padding}" 
                Name="tab" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{StaticResource SidebarTabBorderBrush}"
                SnapsToDevicePixels="True">
                            <ContentPresenter Name="content"
                                              ContentSource="Header" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
                                <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Red"></Setter>
                </Trigger>
                </Style.Triggers>
        </Style>
    </Grid.Resources>
    <TabControl Style="{DynamicResource SidebarTabControl}">
        <TabItem Header="TabItem 1" Style="{DynamicResource SidebarTab}" />
        <TabItem Style="{DynamicResource SidebarTab}"  >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="a"></TextBlock>
                    <TextBlock Text="b"></TextBlock>
                </StackPanel>
            </TabItem.Header>
        </TabItem>
        <TabItem Header="TabItem 3" Style="{DynamicResource SidebarTab}" />
    </TabControl>
</Grid>

Answer 2

, , :

<Style x:Key="SidebarTabForegroundStyleSelected">
    <Setter Property="TextBox.Foreground" Value="White" />
</Style>

<Style x:Key="SidebarTabForegroundStyle">
    <Setter Property="TextBox.Foreground" Value="Black" />
</Style>

TextElement.Foreground TextBlock.Foreground

, , AttachedProperty TabItems, .

<TabControl Style="{DynamicResource SidebarTabControl}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="TextElement.Foreground"
                            Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem>
        <TabItem.Header>
            <StackPanel Orientation="Horizontal">
                <Image Height="16"
                       Source="..\..\Icons\cog.png" />
                <TextBlock Text="TabItem"
                           Margin="5,0,0,0"
                           VerticalAlignment="Center" />
            </StackPanel>
        </TabItem.Header>
        Item 1
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <TextBlock Text="Tab 2" />
        </TabItem.Header>
        Item 2
    </TabItem>
    <TabItem Header="Item 3">
        Item 3
    </TabItem>
</TabControl>