How to override general style with trigger in ControlTemplate?

Question

I have a TabControl that displays a different Tab header foreground and background for a selected tab. But I would like to set a general foreground color for TextBlocks within the tab item content control. What is happening instead is all the headers are getting the general TextBlock foreground color and the tab control is not changing the foreground color for the header when the tab is selected.

So in my main window I have:

<Grid>
    <TabControl Style="{StaticResource TabControlStyle}">
        <TabItem Header="Tab 1" IsSelected="True">
            <TextBlock Text="Text in Tab 1"/>
        </TabItem>
        <TabItem Header="Tab 2">
            <TextBlock Text="Text in Tab 2"/>
        </TabItem>
    </TabControl>
</Grid>

and in my resource file I have defined my colors and content templates:

<Color x:Key="DarkGray">#404040</Color>
<Color x:Key="DarkGreen">#3A5038</Color>
<Color x:Key="ForegroundColor">#FFF1F1F1</Color>

<SolidColorBrush x:Key="DarkGrayBrush"
                 Color="{StaticResource DarkGray}" />
<SolidColorBrush x:Key="ForegroundColorBrush"
                 Color="{StaticResource ForegroundColor}" />
<SolidColorBrush x:Key="DarkGreenBrush"
                 Color="{StaticResource DarkGreen}" />

<Style TargetType="TextBlock">
    <Setter Property="Foreground"
            Value="{StaticResource DarkGrayBrush}" />
</Style>

<Style x:Key="TabControlStyle"
       TargetType="TabControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TabPanel Grid.Row="0"
                              Background="{TemplateBinding Background}"
                              IsItemsHost="true" />
                    <ContentPresenter Grid.Row="1"
                                      ContentSource="SelectedContent" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Resources>
        <Style TargetType="TabItem">
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="FontSize"
                    Value="16" />
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border>
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <Border Name="Border"
                                Width="145"
                                Margin="10"
                                Padding="0"
                                BorderThickness="0"
                                CornerRadius="20">
                            <ContentPresenter x:Name="ContentSite"
                                              Margin="10"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              ContentSource="Header" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected"
                                     Value="True">
                                <Setter TargetName="Border"
                                        Property="Background"
                                        Value="{StaticResource DarkGreenBrush}" />
                                <Setter Property="Foreground"
                                        Value="{StaticResource ForegroundColorBrush}" />
                            </Trigger>
                            <Trigger Property="IsSelected"
                                     Value="False">
                                <Setter Property="Foreground"
                                        Value="{StaticResource DarkGrayBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
</Style>

I am targeting .NET 4.5 on a Windows 10 operating system.

Thanks, Will

score 0 · Answer 1 · answered Aug 08 '17 at 10:35

0

Set the TextBlock.Foreground property of the ContentPresenter:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="TabItem">
            <Border Name="Border"
                                Width="145"
                                Margin="10"
                                Padding="0"
                                BorderThickness="0"
                                CornerRadius="20">
                <ContentPresenter x:Name="ContentSite"
                                              Margin="10"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              ContentSource="Header" TextBlock.Foreground="{StaticResource DarkGrayBrush}" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="Border"
                                        Property="Background"
                                        Value="{StaticResource DarkGreenBrush}" />
                    <Setter TargetName="ContentSite" Property="TextBlock.Foreground"
                            Value="{StaticResource ForegroundColorBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

answered Aug 08 '17 at 10:35

mm8

163,881
10
57
88

Yeah that doesn't work. No change in behavior. Did that work for you? – Will Aug 08 '17 at 14:59
Yes. What results are you expecting and what results are you seeing? – mm8 Aug 08 '17 at 15:19
Hi Thanks, what I am expecting is the foreground color in the Tab to the "Foreground color" when selected, all text to be the Dark Gray color otherwise. What I am seeing is all the text is dark gray, all the time, regardless of what is selected. – Will Aug 08 '17 at 17:14
Did you really set the `TextBlock.Foreground` property of the `ContentPresenter` in your `ControlTemplate`? This works for me: `` – mm8 Aug 09 '17 at 08:10
Yes, in fact I simply copied your Template setter over mine in my sample app. Are you using a separate resource file? – Will Aug 09 '17 at 13:29
No, I copied your sample markup and make the above changes and it clearly works. Try to use some hardcoded brushes instead of `StaticResource DarkGrayBrush`. – mm8 Aug 10 '17 at 09:01

How to override general style with trigger in ControlTemplate?

1 Answers1