WPF Change TabItem Image Background on isSelected with transparent Background

Question

I have been attempting to create a TabControl with TabItems (tabs) that have a background image that changes when selected. I also would like the background of the TabItem to be transparent.

I have tried many different things. I managed to get the transparent background on the TabItem working with this:

Styling TabItems

And the changing image working with this:

Change image on isSelected

But I couldn't seem to combine the two no matter what I tried.

I finally managed to get a transparent background on a TabItem that changes image on isSelected using this :

Set Image When TabItem isSelected

combined with the Styling TabItems link but in testing it for one tab it is causing the second TabItem to have the same background image as the first tab, although the behaviour is exactly what I want, they are changing when selected.

Output Screenshot

I am thinking it has something to do with the way I have the Stackpanel inside the Grid, but I'm not sure.

Thanks!

This is the code that I have currently:

<TabControl TabStripPlacement="Left" Height="500" Width="700" Margin="0,0,200,0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="10,2"/>
<StackPanel>
<HeaderedItemsControl>
<Image x:Name="imgUsers" Source="/images/usersBtnPressed.png" Height="75"/>
</HeaderedItemsControl>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="Transparent"/>
<Setter TargetName="imgUsers" Property="Source" Value="/images/usersBtnPressed.png"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="imgUsers" Property="Source" Value="/images/usersBtn.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

<TabItem Name="tabUsers">
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
<TabItem>
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel>
<Image Source="/images/membersBtn.png" Height="75" Width="150"/>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>

Tink Tink · Accepted Answer · 2019-03-08T07:40:57

For anyone else who may be attempting this.... I managed to work it out by putting the Triggers for changing the TabItem image inside the TabItem itself like so:

<TabControl TabStripPlacement="Left" Height="500" Width="700" Margin="0,0,200,0">
        <TabControl.Resources>
            <Style TargetType="TabItem">

                <Setter Property="Template">

                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid Name="Panel">
                                <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  Margin="10,2"/>

                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Panel" Property="Background" Value="Transparent"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <TabItem Height="75" BorderBrush="{x:Null}">
            <TabItem.Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                            <Image x:Name="imgUsers"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="imgUsers" Property="Image.Source" Value="/images/usersBtnPressed.png" />
                            </Trigger>

                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="imgUsers" Property="Image.Source" Value="/images/usersBtn.png" />
                            </Trigger>
                            </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabItem.Style>
        </TabItem>

        <TabItem Height="75" BorderBrush="{x:Null}">
            <TabItem.Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Image x:Name="imgMembers"/>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="imgMembers" Property="Image.Source" Value="/images/membersBtnPressed.png" />
                                    </Trigger>

                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="imgMembers" Property="Image.Source" Value="/images/membersBtn.png" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabItem.Style>
        </TabItem>

    </TabControl>

Output Users selected

Output Members selected

WPF Change TabItem Image Background on isSelected with transparent Background

1 Answers