WPF: Beware of Zombie Animations Freezing Your Properties

I spent some time today trying to understand why my control’s size and/or position would refuse to change. A statement like...

control.Width = 42;

...would have absolutely no effect: the Width retained whatever value it had before, not 42. Worse yet, this was happening somewhat randomly.

Long story short, the problem was animations. By default, the animation (StoryBoard) will hold animated property at the final value, even long after it is finished. You can assign other values all you want, that will be ignored. I kinda remembered that in the back of my head, but it took me some time until it clicked.

If the property was ever animated, assigning to it would have no effect. If, however, the property was not animated, assignment will work just fine. Hence the “randomness”.

To prevent evil zombie animations from holding on to your property, all you need to do is to set:

storyBoard.FillBehavior = FillBehavior.Stop;

This applies equally to WPF and Silverlight. For that, however, you might be punished with flicker, as the property’s value will suddenly jump in the end of the animation. To avoid the flicker, you may pre-assign the final value just before you start the animation.

// pseudo-code, not fully tested!

var sb = new Storyboard() { 
              Duration = TimeSpan.FromSeconds(1.0), 
              FillBehavior = FillBehavior.Stop };

var animation = new DoubleAnimation { 
              From = intialWidth, To = finalWidth, 
              Duration = sb.Duration };

sb.SetTarget(animation, control);
sb.SetTargetProperty(animation, new PropertyPath("Width"));

control.Width = finalWidth; // avoid flicker in the end of the animation
sb.Begin();

CodeProject