WPF DataTrigger從以前的狀態返回時重新啓動動畫

Question

我正在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，我該如何重新啓動動畫。

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關聯，將 得到體現。