Question

So I’m trying to get my TabItem to display a different image depending on whether it’s selected or not. Right now I’ve got it working using the following code:

<Window.Resources>
    <local:UnselectedImageFilenameConverter x:Key="UnselectedImageFilenameConverter" />
    <local:SelectedImageFilenameConverter x:Key="SelectedImageFilenameConverter" />
    <Style TargetType="TabItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Image Source="{TemplateBinding Header, Converter={StaticResource UnselectedImageFilenameConverter}}" Stretch="None" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Image Source="{TemplateBinding Header, Converter={StaticResource SelectedImageFilenameConverter}}" Stretch="None" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

However this seems quite redundant. I’m changing the whole template when all I need is to change the image source. It seems like there should be a more concise way of doing this, but so far no luck. Any ideas?

Answer 1

You could use a control template instead of a style. In it, you can define a trigger which changes the image source according to your whim.

<ControlTemplate TargetType="{x:Type TabItem}" x:Key="TabItemTemplate">
    <Image x:Name="TabImage" Source="{Binding Something}"/>
    <ControlTemplate.Triggers>
        <Trigger Property="Selector.IsSelected" Value="True">
            <Setter Property="Source" TargetName="TabImage" Value="{Binding SomethingElse}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

In the above template, if you want the template to be applied to every tab item by default, remove the x:Key attribute.