アニメーションのちらつき原因

Question

グリッドの周りに境界線を置くまで、期待どおりに動作する簡単なアニメーションを作成しています。私がマウスをクリックすると、アニメーションがちらつきます。私はビューに "スライド"メニューを達成しようとしています。私は以下のコードを含んでいます。そのマウスのクリックは、どういうわけか、無限のアニメーションループを引き起こしています。

<Border BorderBrush="YellowGreen" CornerRadius="8" BorderThickness="10" Background="Black"> 
     <Grid MouseLeftButtonDown="DragWindow"> 
      <Grid.Resources> 
        <Style TargetType="Frame" x:Key="GrowingFrameStyle"> 
         <Setter Property="Foreground" Value="#505050"/> 
         <Setter Property="Background" Value="Black" /> 
         <Setter Property="Height" Value="20" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" /> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="SteelBlue" /> 
              <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="50" Duration="0:0:.3" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
           <Trigger.ExitActions> 
            <BeginStoryboard> 
             <Storyboard> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" /> 
              <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="Black" /> 
              <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="20" Duration="0:0:.3" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.ExitActions> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
      </Grid.Resources> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="50"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="20"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Label Grid.Row="1" Grid.ColumnSpan="2" Background="Black"/> 
      <Frame Grid.RowSpan="2" Grid.ColumnSpan="2" Background="SlateBlue" VerticalAlignment="Top" Style="{StaticResource GrowingFrameStyle}"/>   
     </Grid> 
    </Border> 

private void DragWindow(object sender, System.Windows.Input.MouseButtonEventArgs e) 
{ 
    DragMove(); 
} 

Answer 1

の背後にあるコードでのみ方法は、それはFrameの拡張領域をクリックすることで引き起こされます。

MouseUpイベントは、MouseLeave/MouseEnterイベントを発生させているようです。 MouseLeaveは、アニメーションをトリガしてフレームを縮小します。これは縮小ウォークボードイベントをキューに入れ、MouseEnterはアニメーションをキューに入れてフレームを拡張し、ストーリーボードの展開イベントをキューに入れます。フレームを縮小/拡大すると、MouseEnter/MouseLeaveが再び起動し、アニメーションが再び実行されます。これらの2つは、フレームが展開されたときだけ占領される魔法の領域からマウスを移動するまで、無限に発砲し続ける。

あなたは2秒の遅延を追加するために、あなたのストーリーボードにBeginTime="00:00:02"を追加することにより、スローモーションでの遅延を表示することができ、あなたがMouseEnterに出力する行を書き込み方法を装着することによりMouseEnter/MouseLeaveイベントを確認することができます/ MouseLeaveフレームのイベント。

これを修正するために、私はそれを行うための最善の方法はわかりません。おそらく、イベントが処理されるべきであることを条件として、1秒の遅延の後に手動でイベントをトリガーするには、MouseEnter/MouseLeaveイベントを使用してみてください。例えば

MouseUpイベントがMouseLeaveとMouseEnterイベントをトリガした場合、その後MouseLeaveは崩壊アニメーションをキューが、第二の遅延、マウスが第二以降のオブジェクト上に実際にあるかどうかを確認すべきです。そうでない場合は、折りたたみイベントをキャンセルします。これにより、MouseLeaveイベントはアニメーションを起動しません。つまり、マウスが展開されたフレームの領域から移動されるまで、アニメーションを無期限にキューに入れません。