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)
{
animationStoryboard.Stop();
animationStoryboard.Children.Clear();
…
// Then add the animations back in 
foreach (var anim in BuildAnimations())
{
   animationStoryboard.Children.Add(anim);
}
animationStoryboard.Begin();
}

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 };