从以前的状态返回时,WPF 数据触发器重新启动动画

本文关键字:数据 WPF 触发器 重新启动 动画 状态 返回 | 更新日期: 2023-09-27 18:34:01

我正在开发一个WPF应用程序。 我有一个 ToggleButton,当它被选中时应该会发出绿色光,当与按钮关联的模型中出现错误时,它应该会闪烁红色光。 (它是一个 ObservableCollection<> ItemsControl)。 执行 DataTrigger 时,动画工作正常,但我希望动画在我选择按钮然后取消选择它时恢复。 换句话说,如果存在与按钮模型关联的错误(它闪烁红色)并且我选择它(现在它是绿色的),然后我取消选择它,那么它应该恢复为闪烁的红色。 实际发生的事情是,一旦取消选择按钮,它只会保持其红色状态而不闪烁。 这是我的 xaml。

<!-- This template is for the selection buttons on the left hand side of the application. -->
<ControlTemplate x:Key="SelectionControlTemplate" TargetType="{x:Type ToggleButton}">
    <Grid Width="Auto" Height="Auto" Margin="3" >
        <Rectangle x:Name="BaseLayer" HorizontalAlignment="Left" Height="50" RadiusY="8" RadiusX="8" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="50" Fill="{DynamicResource FutureBlueButtonGradient}"/>
        <Rectangle x:Name="GlowLayer" HorizontalAlignment="Left" Height="52.25" Width="52.25" RadiusY="6.5" RadiusX="6.5" Stroke="{x:Null}" StrokeThickness="1" VerticalAlignment="Top" Margin="-1.125"/>
        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
    <!-- Animation for blinking. -->
    <ControlTemplate.Resources>
        <Storyboard x:Key="Storyboard1">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="GlowLayer" RepeatBehavior="Forever">
                <EasingColorKeyFrame KeyTime="0" Value="#FFFD0002"/>
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#3FFD0002"/>
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#FFFD0002"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>
    <!-- Style Triggers -->
    <ControlTemplate.Triggers>
        <!-- ERROR CONDITION TRIGGER: Flashes a selection button glowing red when HasTripOrError property is set to true. -->
        <DataTrigger Binding="{Binding HasTripOrError, UpdateSourceTrigger=PropertyChanged}" Value="True">
            <Setter Property="Stroke" TargetName="GlowLayer" Value="{StaticResource SolidRedGlowBrush}"/>
            <Setter Property="Effect" TargetName="GlowLayer">
                <Setter.Value>
                    <BlurEffect/>
                </Setter.Value>
            </Setter>
            <Setter Property="Fill" TargetName="GlowLayer" Value="{StaticResource RadialGradientRedGlowBrush}"/>
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="ErrorGlowStoryBoard" Storyboard="{StaticResource Storyboard1}"/>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="ErrorGlowStoryBoard"/>
            </DataTrigger.ExitActions>
        </DataTrigger>
        <!-- MOUSE OVER TRIGGER: Puts a white outline around the button and increases its brightness a little on mouse over. -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Stroke" TargetName="GlowLayer" Value="#FFFDFFFE"/>
            <Setter Property="Fill" TargetName="BaseLayer" Value="{StaticResource FutureBlueButtonMouseOverGradient}"/>
        </Trigger>
        <!-- SELECTED TRIGGER: Makes the selected control glow green. -->
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Effect" TargetName="GlowLayer">
                <Setter.Value>
                    <BlurEffect/>
                </Setter.Value>
            </Setter>
            <Setter Property="Fill" TargetName="GlowLayer" Value="{StaticResource RadialGradientGreenGlowBrush}"/>
            <Setter Property="Stroke" TargetName="GlowLayer" Value="{StaticResource SolidGreenGlowBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

下面是属性背后的相关代码。 请注意,我试图在动画移动到取消选择状态后提出负责动画的属性。

    public bool IsSelected
    {
        get { return _is_selected; }
        set
        {
            if( _is_selected != value )
            {
                _is_selected = value;
                RaisePropertyChangedEvent("IsSelected");
                //We also need to raise the HasTripOrError property here to resume
                //The red glow animation if there is an error.
                RaisePropertyChangedEvent("HasTripOrError");
            }
        }
    }
    public bool HasTripOrError
    {
        get { return _has_error; }
        set
        {
            if( value != _has_error)
            {
                _has_error = value;
                RaisePropertyChangedEvent("HasTripOrError");
            }
        }
    }

一旦 IsSelected 过渡到 false,如何重新启动动画。

从以前的状态返回时,WPF 数据触发器重新启动动画

IsSelected属性写为:

 private bool _is_selected;
    public bool IsSelected
    {
        get { return _is_selected; }
        set
        {
            if (_is_selected != value)
            {
                _is_selected = value;
                UpdateProperty("IsSelected");
                //We also need to raise the HasTripOrError property here to resume
                //The red glow animation if there is an error.
                HasTripOrError = !HasTripOrError;
                HasTripOrError = !HasTripOrError;
            }
        }
    }

HasTripOrError绑定到DataTrigger.因此,它只会在 HasTripOrError 的值发生变化时执行。

 HasTripOrError = !HasTripOrError;
 HasTripOrError = !HasTripOrError;

上面的代码确保HasTripOrError值将恢复到 最后的原始值和如果有任何Binding相关联,那将 得到反映。