TabItem IsSelected 时如何触发 ColorAnimation？

Question

The following code triggers a ColorAnimation when window is loaded.

How can I trigger a ColorAnimation when TabItem.IsSelected gets true instead?

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="True">
                            <Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                        <GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.Triggers>
                                    <EventTrigger RoutedEvent="Window.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard RepeatBehavior="Forever">
                                                <ColorAnimation Storyboard.TargetName="myGradientStop" Storyboard.TargetProperty="Color" From="Pink" To="Lavender" Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Border.Triggers>
                                <ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <TabControl>
            <TabItem Header="TabItem1">
                <Label Content="TabItem1 content goes here..." />
            </TabItem>
            <TabItem Header="TabItem2">
                <Label Content="TabItem2 content goes here..." />
            </TabItem>
            <TabItem Header="TabItem3">
                <Label Content="TabItem3 content goes here..." />
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Thanks in advance.

Answer 1

You should change your EventTrigger to a Trigger on the TabItem.IsSelected property and move it in the ControlTemplate.Triggers collection that you already have.

Your ControlTemplate would become:

<ControlTemplate TargetType="{x:Type TabItem}">
    <Grid SnapsToDevicePixels="True">
        <Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
                </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="beginStoryboard">
                    <Storyboard RepeatBehavior="Forever">
                        <ColorAnimation Storyboard.TargetName="myGradientStop"
                                        Storyboard.TargetProperty="Color"
                                        From="Pink"
                                        To="Lavender"
                                        Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="beginStoryboard"/>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

I assumed you wanted to stop the animation when the TabItem gets unselected so I added a RemoveStoryboard exit action in the Trigger .