选择TabItem时更改图像

时间:2016-10-11 05:18:22

标签: wpf tabcontrol

我想在选择TabItem时更改图像。

这是我的XAML

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

选择TabItem时,我想从“aa.png”更改为“sel_aa.png”。

1 个答案:

答案 0 :(得分:2)

您可以向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>

选择TabItem时会触发触发器,图像源将更改为sel_aa,当未选择TabItem时,图像源将为aa。