'WPF TabItem Style with image

I have a TabControl with TabItems, The TabItems have text and an icon. To do this I have to add a StackPanel to the TabItem.

However, once I add the StackPanel, I can no longer control the default style of the text.

Resource:

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid Name="tabItem">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Grid.Row="1" Name="tabItemStyle" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" SnapsToDevicePixels="True" Margin="0, 0, 5, 0">
                        <ContentPresenter x:Name="ContentSite" TextBlock.Foreground="White" TextBlock.FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="14,3,18,3">
                        </ContentPresenter>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="tabItemStyle" Property="Background" Value="#ecf3f9" />
                        <Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#29458e" />
                        <Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
                        <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="#29458e" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter TargetName="tabItemStyle" Property="Background" Value="#6381be" />
                            <Setter TargetName="tabItemStyle" Property="BorderBrush" Value="#97acd4" />
                            <Setter TargetName="tabItemStyle" Property="BorderThickness" Value="1,1,1,0" />
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TabItem:

<TabItem>
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image VerticalAlignment="Center" Source="/images/icons/_24/reports.png" Width="24" />
            <TextBlock VerticalAlignment="Center" Margin="5, 0" >Reports</TextBlock>
        </StackPanel>
    </TabItem.Header>
</TabItem>

The relevant line is the ContentPresenter in the Resource (Style). The TextBlock.Foreground="White" no longer works. I can see why but cannot find out how else to do this. Any ideas?

wpfstylestabcontroltabitemcontentpresenter


Solution 1:[1]

Simply set the relevant properties on the actual TabItem. For instance, notice if you put the following at the top of the style:

<Setter Property="Foreground" Value="Red" />

the text still changes. You don't need to refer to the ContentPresenter's TextBlock, and even if you did, you could apply TemplateBindings to its properties so that when TabItem's properties changed, so did ContentPresenter's.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel Ward

Related Questions