How to use the Completed event handler in silverlight

Question

Onmouseover moves my image down 50px (storyboard1) Onmouseout moves my image back up 50px (storyboard2)

My problem is that if you mouseover quickly and then back out again it makes the animation stutter because storyboard1 isn't completing its animation, it stops when I mouseout. How can I use the completed event handler or some other method to force storyboard1 to fully complete before storyboard2 is allowed to begin?

I tried hooking up the completed event handler which creates a method in my C# code. In that code I tried setting a global bool to true if the storyboard completed, and then in my mouseout event I said if my bool is not true then don't being storyboard2, which didn't work.

Answer 1

Note:

The first animation is not actual stopping, it is just that the value changes are overwritten by the storyboard that runs last. Storyboards run until explicitly stopped, holding the last values.

Solution:

To avoid a stutter you need to make sure your onmouseout storyboard does not have initial values. Only final values. Then it will interpolate back to the starting point from wherever it is and not jump to the final point and then animate back.

If you can't fix it yourself, please post your Xaml and I will post a fix.

The next problem:

The problem with this new scenario will then be that the time of the animation is fixed, so the animation back will appear slower (e.g. it will take the same time to travel from halfway back as it would from fully back).

The solution to that problem is another question (where the answer involves changing the playback speed dynamically).