WPF衝突動畫

Question

我有兩個動畫控制TextBox邊框的顏色。一個動畫將顏色從默認的黃色更改爲藍色，並且一個動畫將顏色更​​改回默認值。這些動畫從IsFocused上的觸發器開始。這工作正常。

現在我想要IsMouseOver觸發相同的動畫。我希望的行爲是TextBox的邊框應該是藍色的，如果它有焦點或者鼠標懸停在它上面，否則它應該是黃色的。在這兩個州之間應該有一個動畫過渡。

如前所述，當TextBox獲取或失去焦點時用動畫改變顏色不是問題。當鼠標移動到文本框上時，也沒有改變顏色的問題。問題在於兩者都有。然後是衝突...

我該如何擁有這兩個動畫？

下面是一些帶有兩種動畫的代碼，但是由於衝突，這不符合我的要求。什麼情況是，如果我將鼠標懸停在文本框一旦動畫將永遠不會在IsFocused再次運行...

<TextBox Width="200" Height="140" BorderBrush="Yellow" BorderThickness="4"> 
     <TextBox.Style> 
      <Style TargetType="TextBox"> 
       <Style.Resources> 
        <Storyboard x:Key="RecievedFocusOrMouseOverAnimation"> 
         <ColorAnimation 
          Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)" 
          To="Blue" 
          Duration="0:0:0.2" /> 
        </Storyboard> 
        <Storyboard x:Key="LostFocusOrMouseOutAnimation"> 
         <ColorAnimation 
          Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)" 
          To="Yellow" 
          Duration="0:0:0.2" /> 
        </Storyboard> 
       </Style.Resources> 
       <Style.Triggers> 
        <Trigger Property="IsFocused" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" /> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" /> 
         </Trigger.ExitActions> 
        </Trigger> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard Name="IsMouseOverTrueBeginStoryboard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" /> 
         </Trigger.EnterActions> 
         <Trigger.ExitActions> 
          <BeginStoryboard Name="IsMouseOverFalseBeginStoryboard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" /> 
         </Trigger.ExitActions> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBox.Style> 
    </TextBox> 

Answer 1

我建議你嘗試使用MultiDataTrigger與像描述here OR條件。你的代碼應該是這樣的：

<MultiDataTrigger> 
    <MultiDataTrigger.Conditions> 
     <Condition Value="True"> 
      <Condition.Binding> 
       <MultiBinding Converter="{StaticResource BooleanOr}"> 
        <Binding Path="IsMouseOver" RelativeSource="{RelativeSource self}" /> 
        <Binding Path="IsFocused" RelativeSource="{RelativeSource self}" /> 
       </MultiBinding> 
      </Condition.Binding> 
     </Condition> 
    </MultiDataTrigger.Conditions> 
    <MultiDataTrigger.EnterActions> 
     <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" /> 
    </MultiDataTrigger.EnterActions> 
    <MultiDataTrigger.ExitActions> 
     <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" /> 
    </MultiDataTrigger.ExitActions> 
</MultiDataTrigger> 

BooleanOr是IMultiValueConverter，計算的或它的所有參數之間（你可以找到它附着在文章中的鏈接的代碼）。

Answer 2

您似乎需要在開始新故事板之前停止潛在的故事板運行。試試這個

<Trigger Property="IsFocused" Value="True"> 
    <Trigger.EnterActions> 
     <StopStoryboard BeginStoryboardName="IsMouseOverTrueBeginStoryboard"/> 
     <StopStoryboard BeginStoryboardName="IsMouseOverFalseBeginStoryboard"/> 
     <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" /> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" /> 
    </Trigger.ExitActions> 
</Trigger> 
<Trigger Property="IsMouseOver" Value="True"> 
    <Trigger.EnterActions> 
     <StopStoryboard BeginStoryboardName="IsFocusedTrueBeginStoryBoard"/> 
     <StopStoryboard BeginStoryboardName="IsFocusedFalseBeginStoryBoard"/> 
     <BeginStoryboard Name="IsMouseOverTrueBeginStoryboard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" /> 
    </Trigger.EnterActions> 
    <Trigger.ExitActions> 
     <BeginStoryboard Name="IsMouseOverFalseBeginStoryboard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" /> 
    </Trigger.ExitActions> 
</Trigger>