C# WPF动画自动停止

我有一个WPF应用程序，其中包含一个UserControl，其边框是动画的：

<UserControl x:Class="CarSystem.CustomControls.AlarmItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cs="clr-namespace:CarSystem.CustomControls"
             mc:Ignorable="d"
             DataContext="{Binding Path=Alarm, RelativeSource={RelativeSource Self}}">

    <UserControl.Resources>
        <Style TargetType="{x:Type cs:AlarmItem}">
            <Setter Property="IsFlashing" Value="False" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsExpired}" Value="True">
                    <Setter Property="IsFlashing" Value="True" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=IsPending}" Value="True">
                    <Setter Property="IsFlashing" Value="True" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Border HorizontalAlignment="Center" 
            Margin="5" 
            Height="100"
            Name="Border" 
            VerticalAlignment="Center" 
            Width="100">
        <Border.Resources>
            <Storyboard x:Key="FlashingStoryboard"
                        AutoReverse="True"
                        RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Duration="00:00:00.5"
                                              Storyboard.TargetName="Border"
                                              Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="00:00:00.25" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="Black" />
                <Setter Property="BorderThickness" Value="2" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsExpired}" Value="True">
                        <Setter Property="BorderThickness" Value="4" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsPending}" Value="True">
                        <Setter Property="BorderThickness" Value="4" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FlashStates">
                <VisualState x:Name="FlashingOn"
                             Storyboard="{StaticResource ResourceKey=FlashingStoryboard}" />
                <VisualState x:Name="FlashingOff" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image Grid.Row="0" 
                   Name="AlarmImage" 
                   Source="{Binding Path=Image, RelativeSource={RelativeSource AncestorType={x:Type cs:AlarmItem}}}" 
                   Stretch="Fill" />
            <cs:ResponseTimer Expired="Timer_Expired"
                              Grid.Row="1"
                              HideIfExpired="True"
                              IsTabStop="False"
                              MinHeight="10"
                              x:Name="TheTimer"
                              TimeoutPeriod="00:02:30"
                              VerticalAlignment="Bottom" />
        </Grid>
    </Border>
</UserControl>

该应用程序从我公司生产的专有设备接收数据。对象将被接收并加载到视图模型类实例中。为接收到的每个对象创建此控件的新实例，将对视图模型的引用放入新控件实例的

DataContext

属性中，并将新控件添加到

窗口中的
列表框中

动画应该在对象的状态属性为特定值时运行。还有第二个状态值，其中动画也应该运行，并且在用户未响应该项目的固定时间间隔后，状态将更改为该值。只有当状态具有只能由用户交互设置的值时，动画才会停止

接收并显示第一个对象时，动画工作正常。如果没有收到其他对象，动画将继续运行&当计时器过期时，边框颜色将按预期进行更改

但是，在接收到2个或多个对象后，动画将自行停止。这是在更改导致边框颜色更改的状态的计时器过期之前，以及在采取任何用户操作之前。请注意，它并不总是在第二个对象上停止，有时需要在动画停止之前接收3或4个对象

有人知道为什么动画停止了吗？我如何让每个人都跑到底？有没有更好的方法来获得相同的效果而不存在此问题？
我遇到过的最接近这种情况是根据视图模型中的值触发动画。我在这里选择了“更好的方式”，所以如果这不符合您的解决方案，我很抱歉，我只是根据我所看到的来道歉

现在您提到为来自外部设备的每个警报创建一个新控件？因此，我将假设该控件绑定到单个实例，并以类似列表框的形式显示

如果你还和我在一起，你的控件实例有它自己的视图模型实例，从外观上看，你从IsPending和IsExpired属性触发，当其中一个为真时，让它闪烁

我要做的第一件事是简化ViewModel添加为IsAlertRequired属性的绑定，该属性是在需要警报时设置的，可以在setter中为现有属性更新。这里的原因是单个触发器比多重绑定容易得多

然后使用DataTrigger启动故事板。在应用程序中添加对Microsoft.Expression.Interactions的引用，然后将其导入到XAML中：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 

然后在layoutroot元素之前添加触发器：

    <i:Interaction.Triggers>
    <ei:DataTrigger Binding="{Binding ViewModel.IsAlertRequired}" Value="True">
        <ei:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource FlashingAnimation}"/>
    </ei:DataTrigger>



这将基于视图模型数据绑定启动动画

假设你走了那么远，并且它可以开始你的动画，如果它仍然停止，那么我会检查viewmodel或外部组件中是否有东西阻塞了UI线程

希望这能有所帮助。
感谢kidshaw提供的信息，我找到了一个可行的解决方案。本质上，动画应该在两种颜色之间来回切换
边框
控件的
边框笔刷
，黑色和一种颜色取决于
数据上下文中对象的属性。这个逻辑在代码隐藏中，因为这个逻辑依赖于数据上下文对象的两个不同属性，我无法想出一个正常工作的XAML触发器。它没有包含在原始问题中，因为它似乎不相关

正如kidshaw回答的评论中所提到的，问题是当窗口中出现额外的警报时，动画无法跟踪
边框笔刷的颜色。例如，它不会在红色和黑色之间来回切换，而是认为它必须在黑色和黑色或红色和红色之间切换。所以看起来好像没有动画片发生，实际上是这样

为了解决这个问题，并且由于需要根据数据上下文中对象的属性选择颜色，我最终为另一种颜色的动画添加了第二个
DiscreteColorKeyFrame
。我尝试将
DiscreteColorKeyFrame
的
值
属性绑定到我添加到控件的
DependencyProperty
，该属性将由代码隐藏逻辑设置，但不起作用。动画不断在黑色和透明之间来回切换，而VS中的输出窗口不断记录有关
CanFreeze
为false的错误

因此，我最终为每种不同的颜色制作了一个动画，并为每种颜色向
VisualStateManager
添加了一个
VisualState
。后面的代码也发生了变化，bu tI让一切都正常工作了

以下是XAML：

<UserControl x:Class="CarSystem.CustomControls.AlarmItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cs="clr-namespace:CarSystem.CustomControls"
             mc:Ignorable="d"
             DataContext="{Binding Path=Alarm, RelativeSource={RelativeSource Self}}">

    <UserControl.Resources>
        <Style TargetType="{x:Type cs:AlarmItem}">
            <Setter Property="IsFlashing" Value="False" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsExpired}" Value="True">
                    <Setter Property="IsFlashing" Value="True" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=IsPending}" Value="True">
                    <Setter Property="IsFlashing" Value="True" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Border HorizontalAlignment="Center" 
            Margin="5" 
            Height="100"
            Name="Border" 
            VerticalAlignment="Center" 
            Width="100">
        <Border.BorderBrush>
            <SolidColorBrush x:Name="AnimatedBrush" Color="Black" />
        </Border.BorderBrush>
        <Border.Resources>
            <Storyboard x:Key="ExpiredAnimation"
                        AutoReverse="False"
                        RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Duration="00:00:01"
                                              Storyboard.TargetName="AnimatedBrush"
                                              Storyboard.TargetProperty="Color">
                    <DiscreteColorKeyFrame KeyTime="00:00:00" Value="#FFFFFF78" />
                    <DiscreteColorKeyFrame KeyTime="00:00:00.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="HistoricalAnimation"
                        AutoReverse="False"
                        RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Duration="00:00:01"
                                              Storyboard.TargetName="AnimatedBrush"
                                              Storyboard.TargetProperty="Color">
                    <DiscreteColorKeyFrame KeyTime="00:00:00"   Value="#FFFFFF78" />
                    <DiscreteColorKeyFrame KeyTime="00:00:00.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="PendingAnimation"
                        AutoReverse="False"
                        RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Duration="00:00:01"
                                              Storyboard.TargetName="AnimatedBrush"
                                              Storyboard.TargetProperty="Color">
                    <DiscreteColorKeyFrame KeyTime="00:00:00" Value="Red" />
                    <DiscreteColorKeyFrame KeyTime="00:00:00.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="WhiteListAnimation"
                        AutoReverse="False"
                        RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                              Duration="00:00:01"
                                              Storyboard.TargetName="AnimatedBrush"
                                              Storyboard.TargetProperty="Color">
                    <DiscreteColorKeyFrame KeyTime="00:00:00" Value="#FF5819" />
                    <DiscreteColorKeyFrame KeyTime="00:00:00.5" Value="Black" />
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </Border.Resources>

        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="BorderThickness" Value="2" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsExpired}" Value="True">
                        <Setter Property="BorderThickness" Value="4" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=IsPending}" Value="True">
                        <Setter Property="BorderThickness" Value="4" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FlashStates">
                <VisualState x:Name="ExpiredState"    Storyboard="{StaticResource ResourceKey=ExpiredAnimation}" />
                <VisualState x:Name="HistoricalState" Storyboard="{StaticResource ResourceKey=HistoricalAnimation}" />
                <VisualState x:Name="PendingState"    Storyboard="{StaticResource ResourceKey=PendingAnimation}" />
                <VisualState x:Name="WhiteListState"  Storyboard="{StaticResource ResourceKey=WhiteListAnimation}" />
                <VisualState x:Name="FlashingOff" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image Grid.Row="0" 
                   Name="AlarmImage" 
                   Source="{Binding Path=Image, RelativeSource={RelativeSource AncestorType={x:Type cs:AlarmItem}}}" 
                   Stretch="Fill" />
            <cs:ResponseTimer Expired="Timer_Expired"
                              Grid.Row="1"
                              HideIfExpired="True"
                              IsTabStop="False"
                              MinHeight="10"
                              x:Name="TheTimer"
                              TimeoutPeriod="00:02:30"
                              VerticalAlignment="Bottom" />
        </Grid>
    </Border>
</UserControl>

请注意，数据上下文对象属性的值可能会因用户交互或计时器过期而更改，在第一种情况下，计时器将一起停止闪烁，或者
private void StartStatusAnimation() {
    if ( condition1 ) {
        // It is.  Display the WhiteListAnimation.
        if ( !VisualStateManager.GoToElementState( Border, "WhiteListState", true ) ) {
            // Log error
        }
    } else if ( condition2 ) {
        if ( !VisualStateManager.GoToElementState( Border, "ExpiredState", true ) ) {
            // Log error
        }

    } else if ( condition3 ) {
        if ( !VisualStateManager.GoToElementState( Border, "HistoricalState", true ) ) {
            // Log error
        }
    } else if ( condition4 ) {
        if ( !VisualStateManager.GoToElementState( Border, "PendingState", true ) ) {
            // Log error
        }
    } else {
        // We don't know what state this is.  Stop flashing now
        if ( !VisualStateManager.GoToElementState( Border, "FlashingOff", true ) ) {
            // Log error
        }
    }
}