TabItem IsSelected时如何触发ColorAnimation？答案

【问题标题】：How to trigger a ColorAnimation when TabItem IsSelected?TabItem IsSelected时如何触发ColorAnimation？
【发布时间】：2019-12-15 16:13:58
【问题描述】：

以下代码在加载窗口时触发ColorAnimation。

当TabItem.IsSelected 改为true 时，如何触发ColorAnimation？

<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>

提前致谢。

【问题讨论】：

标签： c# wpf vb.net xaml animation

【解决方案1】：

您应该将 TabItem.IsSelected 属性上的 EventTrigger 更改为 Trigger，并将其移动到您已有的 ControlTemplate.Triggers 集合中。

您的ControlTemplate 将变为：

<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>

我假设您想在 TabItem 未选中时停止动画，因此我在 Trigger 中添加了 RemoveStoryboard 退出操作。

【讨论】：