WPF矛盾するアニメーション

Question

TextBoxの境界線の色を制御する2つのアニメーションがあります。 1つのアニメーションでは、デフォルトの黄色から青に色が変更され、1つのアニメーションでは色がデフォルトに戻ります。これらのアニメーションは、IsFocusedのトリガーで開始されます。これは正常に動作します。

今、同じアニメーションをIsMouseOverでも作成したいと思っています。私の希望する動作は、TextBoxの枠線がフォーカスを持っている場合、またはマウスがその上を移動している場合は青色でなければならず、そうでない場合は黄色になります。そして、状態の間にアニメーション化された移行があるはずです。

前述したように、TextBoxがフォーカスを取得または喪失したときにアニメーションで色を変更することは問題ではありません。また、マウスがTextBox上を移動するときに色を変更するのに問題はありません。問題は両方がある。次に、矛盾があります...

どのようにこれらのアニメーションを作成できますか？

ここでは両方のアニメーションでいくつかのコードがありますが、それは私がそれが紛争のためにそれをしたいので動作しません。何が起こるかというと

<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

私はあなたが説明hereのようなOR条件でMultiDataTriggerを使用しようと示唆している...私はアニメーション一度テキストボックスの上にマウスを置く場合は、再度IsFocused上で実行されることはありませんということです。 （あなたがリンクで記事に添付のコードでそれを見つけることができます）

<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は、すべての引数の間のORを計算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>