CODEWITHSUNDEEP
wpftabcontrol
Jin Kyou Choi
Jin Kyou Choi

Reputation: 19

Change image when TabItem is selected

I want to change image when TabItem is selected.

This is my XAML

<TabControl>
<TapItem>
    <TabItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image Source="aa.png"/>
            <TextBlock>AA</TextBlock>
        </StackPanel>
    </TabItem.Header>
</TapItem>

When TabItem selected, I want to change from "aa.png" to "sel_aa.png".

Upvotes: 1

Views: 1035

Answers (1)

Rom
Rom

Reputation: 1193

You can add triggers to your TabItem ControlTemplate

 <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"></RowDefinition>
                            <RowDefinition Height="30"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0" Name="Border">
                            <ContentPresenter Content="AA" VerticalAlignment="Center" Margin="5" HorizontalAlignment="Center" ContentSource="Header" />
                        </Border>
                        <Image Grid.Row="1" x:Name="Image"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="Red" />
                            <Setter TargetName="Image" Property="Image.Source" Value="sel_aa.png" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="Green" />
                            <Setter TargetName="Image" Property="Image.Source" Value="aa.png" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

When your TabItem is selected a trigger is fired and the image source will change to sel_aa, when TabItem is not selected the image source will be aa.

Upvotes: 3

Related Questions