Question

Why does the following animation flicker and act goofy on MouseLeave? If it can be repro-ed, I’ll post a screencast.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'       xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>   <Canvas>     <Path Fill='Blue' Margin='15,15,15,15'>       <Path.Data>         <!-- Describes an ellipse. -->         <EllipseGeometry x:Name='MyAnimatedEllipseGeometry' Center='200,100' RadiusX='15' RadiusY='15' />       </Path.Data>       <Path.Triggers>         <EventTrigger RoutedEvent='UIElement.MouseEnter'>           <BeginStoryboard>             <Storyboard Duration='0:0:.5'>               <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry'                           Storyboard.TargetProperty='RadiusX'                          From='15' To='100' />               <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry'                           Storyboard.TargetProperty='RadiusY'                          From='15' To='100' />             </Storyboard>           </BeginStoryboard>         </EventTrigger>         <EventTrigger RoutedEvent='UIElement.MouseLeave'>           <BeginStoryboard>             <Storyboard Duration='0:0:.5'>               <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry'                           Storyboard.TargetProperty='RadiusX'                          From='100' To='15' />               <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry'                           Storyboard.TargetProperty='RadiusY'                          From='100' To='15' />             </Storyboard>           </BeginStoryboard>         </EventTrigger>       </Path.Triggers>     </Path>   </Canvas> </Page> 

Answer 1

The reason is that you specify a From on your DoubleAnimations.

If the radius is anything less than 100 when MouseLeave happens, the From property will make it jump up to 100 and likely cause a MouseEnter. Then, you have two competing animations and the mouse events go crazy as the ellipse radius flickers underneath the cursor.

The solution is to just omit the From properties, this will cause the animation to start from wherever the current radius is:

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Title='Window1'>     <Canvas>         <Path Margin='15,15,15,15' Fill='Blue'>             <Path.Data>                 <!-- Describes an ellipse. -->                 <EllipseGeometry x:Name='MyAnimatedEllipseGeometry' Center='200,100' RadiusX='15' RadiusY='15'/>             </Path.Data>             <Path.Triggers>                 <EventTrigger RoutedEvent='UIElement.MouseEnter'>                     <BeginStoryboard>                         <Storyboard>                             <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry' Duration='0:0:.5' Storyboard.TargetProperty='RadiusX' To='100'/>                             <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry' Duration='0:0:.5' Storyboard.TargetProperty='RadiusY' To='100'/>                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger>                 <EventTrigger RoutedEvent='UIElement.MouseLeave'>                     <BeginStoryboard>                         <Storyboard>                             <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry' Duration='0:0:.5' Storyboard.TargetProperty='RadiusX' To='15'/>                             <DoubleAnimation Storyboard.TargetName='MyAnimatedEllipseGeometry' Duration='0:0:.5' Storyboard.TargetProperty='RadiusY' To='15'/>                         </Storyboard>                     </BeginStoryboard>                 </EventTrigger>             </Path.Triggers>         </Path>     </Canvas> </Page> 

On an unrelated note, when you set Storyboard.Duration, it won’t speed up your child animations, it will just end the Storyboard prematurely. You really want to set Duration on your child DoubleAnimations – I’ve modified the XAML above to do this.