title: wpf animation events overlapping
body: <p>I've got a canvas control that grows in height when you move the mouse over it and shrinks back on mouse leave.</p>
  
  <pre><code>&lt;Canvas x:Name="infoBar" Width="720" Height="39" Background="Red"&gt;
              &lt;Canvas.Triggers&gt;
                  &lt;EventTrigger RoutedEvent="Canvas.MouseEnter"&gt;
                      &lt;BeginStoryboard&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimation
              Storyboard.TargetName="infoBar" 
              Storyboard.TargetProperty="Height"
              From="39" To="255" Duration="0:0:0.5" 
              /&gt;
                          &lt;/Storyboard&gt;
                      &lt;/BeginStoryboard&gt;
                  &lt;/EventTrigger&gt;
                  &lt;EventTrigger RoutedEvent="Canvas.MouseLeave"&gt;
                      &lt;BeginStoryboard&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimation
              Storyboard.TargetName="infoBar" 
              Storyboard.TargetProperty="Height"
              From="255" To="39" Duration="0:0:0.5" 
              /&gt;
                          &lt;/Storyboard&gt;
                      &lt;/BeginStoryboard&gt;
                  &lt;/EventTrigger&gt;
              &lt;/Canvas.Triggers&gt;
              &lt;StackPanel&gt;
                  &lt;TextBlock/&gt;
                  &lt;TextBlock/&gt;
             &lt;/StackPanel&gt; 
          &lt;/Canvas&gt;
  </code></pre>
  
  <p>This works fine. However if two quick consecutive events take place (mouseleave before mouse enter animation finishes) it goes nuts. </p>
  
  <p>Is there anyway i can tell it to cancel out any other events that happen before an animation finishes?</p>