Question

This project is in c# under .net 4.

I have a custom object that changes value every so often. A UI control should reflect the latest state – so I’m trying to use bindings, but I can’t get it hooked up.

I want the control to notice when the value of the object changes (binding?), and then animate (Storyboard?) to the new value over 1/2 s or so. It’s direction-specific, so if the old value was 340degrees, and the new is 15 degrees, I don’t want it to rotate around the ‘long way’, so would need some logic for the animation somewhere.

Ideally, all of this animation detail should be in the UI (xaml) – my object that gets updated doesn’t want to know about UI details. The tools in Blend4 don’t seem up to the job, and my hacking around in xaml is going nowhere very slowly…

Should I have another object that listens for the changes to my source object and then configures the animation every time? Should it be all in xaml? ‘Real’ code?

Does anyone know the right approach to take, here? Or can point to someone having blogged something pretty similar? I’ve been on this for two days, now!

Answer 1

After going back and forth with respect to responsibility for animation, fear of designers stuffing up code in blend, and actually getting it working, I’ve (provisionally) arrived on a solution of sorts…

this is called in MainWindow.xaml.cs on startup:

private void initialiseCustomAnimations()
{

    compassRoseAnimation = new DoubleAnimation();
    compassRoseAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
    navigationData.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(navigationData_PropertyChanged);

}

and this is the guts (where CompassWithNumbersControl is a canvas built in blend):

private void navigationData_PropertyChanged(object sender, EventArgs e)
{
    compassRoseAnimation.From = navigationData.previousHeading;
    compassRoseAnimation.To = navigationData.heading;
    RotateTransform rotateTransform = new RotateTransform();
    CompassWithNumbersControl.RenderTransform = rotateTransform;
    rotateTransform.BeginAnimation(RotateTransform.AngleProperty, compassRoseAnimation);
}

I should only perform this animation on the correct event getting fired, but it works..