Question

我正在研究WPF应用程序。我有一个ToggleButton，它应该在选中时呈绿色亮起，并在与按钮关联的模型中出现错误时闪烁红光。（它是一个ObservableCollection＆lt;＆gt; 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，我该如何重新启动动画。

Answer 1

将您的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相关联得到反映。

从以前的状态返回时，WPF DataTrigger重新启动动画

1 个答案: