Question

I have a TabControl which looks like this:

<TabControl>
  <TabItem>
    <TabItem.Header>
      <StackPanel Orientation="Horizontal"> 
        <Canvas ... />
        <Label>Tab Number 1</Label>
      </StackPanel>
    </TabItem.Header>
  </TabItem>
 <TabItem>
    <TabItem.Header>
      <StackPanel Orientation="Horizontal">    
        <Canvas ... />
        <Label>Tab Number 2</Label>
      </StackPanel>
    </TabItem.Header>
  </TabItem>
</TabControl>

Ok, i like to have a different Text Color when the item is selected. I created a Style for that purpose:

<Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Height="60">
                        <Border x:Name="Border" BorderBrush="#FFC6C7C8"
                             BorderThickness="1,0,1,0" Margin="-1,0,0,0">
                        </Border>
                        <Border x:Name="BorderOverlay" BorderBrush="Transparent"
                             BorderThickness="1,0,1,0" Margin="-1,0,0,0">
                            <ContentPresenter x:Name="ContentSite"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               ContentSource="Header"
                               Margin="15,6,15,6">
                            </ContentPresenter>    
                        </Border>   
                  </Grid>
                  <ControlTemplate.Triggers>
                     <Trigger Property="IsSelected" Value="True">
                         <!-- What goes here? -->
                     </Trigger>
                  <ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
      </Setter>
</Style>

I tried by just setting Label.Foreground, but it doesn’t seem to work. I also tried it with a TextBlock, which did not worked as well.

I think this question is similar to mine, but the problem wasn’t solved in the end:
Setting TabItem foreground color also sets the TabControl foreground color

Thanks for any help.

Answer 1

Try using Style Triggers instead of Control Template Triggers.

Add this to your current style:

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Green" />
            </Trigger>
            <Trigger Property="IsSelected" Value="False">
                <Setter Property="Foreground" Value="Red" />
            </Trigger>
        </Style.Triggers>

Here’s a generic style for everyone else.

            <Style TargetType="{x:Type TabItem}">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Foreground" Value="Green" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter Property="Foreground" Value="Red" />
                    </Trigger>
                </Style.Triggers>
            </Style>