WPF TabItem Header Images

Question

I've got a TabControl in WPF with 3 tabs, and each tab has an image next to the title of the tab. Here's an example

        <TabItem>
            <TabItem.Header>
                <StackPanel Orientation="Horizontal">
                    <Image Name="img" Height="auto" Width="auto" Source="images/1.png" />
                    <TextBlock Text="Login" Margin="2,0,0,0" VerticalAlignment="Center" />
                </StackPanel>
            </TabItem.Header>
        </TabItem>

When the tab is selected the text is black and the background is white, when its not it's a light gray color and a slightly darker text. This works great, but what I can't figure out is how to change the images on the tabs that aren't selected? Right now the images all look the same, green circle with a number inside, but when a tab is not selected I'd like it to change to a different image, i.e. images/1_notselected.png and images/2_notselected.png when tab is is the selected one. Thanks!

Answer 1

declare a style for TabItem, and inside style change the image in a trigger.

Declare a HeaderTemplate and then use Trigger like this:

   <Trigger Property="IsSelected" Value="True">
       <Setter Property="Source" TargetName="img" Value="images/customimage.png"/>
   </Trigger>