UWP Custom control gotchas– Animation

Initially I wanted to add a custom transition to my control, but that hasn’t worked out.

Instead I’ve ended up with adding custom animation into ArrangeOverride. I found it best to keep a single Storyboard for all the animation, and so my code basically looks like this

private Storyboard animationStoryboard = new Storyboard();

protected override Size ArrangeOverride(Size finalSize)

// Then add the animations back in
foreach (var anim in BuildAnimations())

This unfortunately led to the animation jumping back towards its earlier values once it had finished so it was only ever 90% or so. I tried multiple things in my BuildAnimations(). e.g.

new DoubleAnimation {From=thing.X, To=x};

new DoubleAnimation {From=DependencyProperty.GetValue(thing), To=x};

new DoubleAnimation {From=DependencyProperty.ReadLocalValue(thing), To=x};

new DoubleAnimation {From=DependencyProperty.GetAnimationBaseValue(thing), To=x};

Maybe it was just that the values were not being correctly being set by the

I even tried setting the values when the animation finished…

var result = new DoubleAnimation{From=thing.X, To=x};

result.Completed += (sender, args) => { thing.X = x; };

.. but the debugger showed me that the values already were what I expected. Maybe we just need to change the way the animation sets the value…

new DoubleAnimation{From=thing.X, To=x, FillBehavior=FillBehavior.Stop };

new DoubleAnimation{From=thing.X, To=x, FillBehavior=FillBehavior.HoldEnd };

.. nope.

Finally I discovered to set the value being animated to the final value, then animate over the top, from the original value to the final!!

thing.X = x;
new DoubleAnimation{From=thing.X, To=x, FillBehavior=FillBehavior.Stop };