wpf animation events overlapping

Question

I've got a canvas control that grows in height when you move the mouse over it and shrinks back on mouse leave.

<Canvas x:Name="infoBar" Width="720" Height="39" Background="Red">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Canvas.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
            Storyboard.TargetName="infoBar" 
            Storyboard.TargetProperty="Height"
            From="39" To="255" Duration="0:0:0.5" 
            />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Canvas.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
            Storyboard.TargetName="infoBar" 
            Storyboard.TargetProperty="Height"
            From="255" To="39" Duration="0:0:0.5" 
            />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <StackPanel>
                <TextBlock/>
                <TextBlock/>
           </StackPanel> 
        </Canvas>

This works fine. However if two quick consecutive events take place (mouseleave before mouse enter animation finishes) it goes nuts.

Is there anyway i can tell it to cancel out any other events that happen before an animation finishes?

Answer 1

Using your event triggers you can perform pause, stop, resume, etc. commands on named storyboards.

This article should answer your questions.