Storyboard changing property but not reflected in UI

Question

I have this method fired on a button click. MyObj is an extended Control type with two properties CenterX and CenterY with backing dp CenterXProperty and CenterYProperty.

With the animation playing the CenterX and CenterY properties of MyObj are changing, but I can't see any movement of the object.

private void MoveMyObjectsWithAnimation(MyObj item, Point point)
    {
        Duration duration = new Duration(TimeSpan.FromSeconds(3));
        Storyboard sb = new Storyboard();
        sb.Duration = duration;

        DoubleAnimation da = new DoubleAnimation();
        da.Duration = duration;
        da.EasingFunction = new SineEase();
        DoubleAnimation da1 = new DoubleAnimation();
        da1.Duration = duration;
        da1.EasingFunction = new SineEase();




        Storyboard.SetTarget(da, item);
        Storyboard.SetTargetProperty(da, new PropertyPath(MyObj.CenterXProperty));

        da.From = item.CenterX;
        da.To = point.X;


        Storyboard.SetTarget(da1, item);
        Storyboard.SetTargetProperty(da1, new PropertyPath(MyObj.CenterYProperty));

        da1.From = item.CenterY;
        da1.To = point.Y;
        sb.Children.Add(da);
        sb.Children.Add(da1);
        sb.Begin();



    }

Following is the property system declared in MyObj class.

      public double CenterX
    {
        get
        {

         return (double)GetValue(CenterXProperty)+25;
        }
        set
        {
            Canvas.SetLeft(this, value - 25);
            SetValue(CenterXProperty, value);
            OnPropertyChanged(new PropertyChangedEventArgs("CenterX"));
        }
    }
    public double CenterY
    {
        get
        {


            return (double)GetValue(CenterYProperty) + 25;
        }
        set
        {
            Canvas.SetTop(this, value - 25);
            SetValue(CenterYProperty, value);
            OnPropertyChanged(new PropertyChangedEventArgs("CenterY"));

        }
    }

    public static readonly DependencyProperty CenterXProperty =
        DependencyProperty.Register("CenterX", typeof(double), typeof(MyObj), null);

    public static readonly DependencyProperty CenterYProperty =
        DependencyProperty.Register("CenterY", typeof(double), typeof(MyObj), null);

What am I doing wrong?

Answer 1

This was a tough one as your code appeared correct.

The problem is actually that the DP setter is not called when a property is animated. Your property setters were never hit.

You can only catch the callback on the property change instead.

This works:

public double CenterX
{
    get { return (double)GetValue(CentreXProperty); }
    set { SetValue(CentreXProperty, value); }
}

// Using a DependencyProperty as the backing store for CentreX.  
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty CentreXProperty =
    DependencyProperty.Register("CentreX",
                                typeof(double),
                                typeof(MyObj),
                                new PropertyMetadata(0.0,
                                    new PropertyChangedCallback(OnCentreXChanged)));

static void OnCentreXChanged(object sender, DependencyPropertyChangedEventArgs args)
{
    // Get reference to self
    MyObj source = (MyObj)sender;

    // Add Handling Code
    double newValue = (double)args.NewValue;

    Canvas.SetTop(source, newValue - 25);
}

Just duplicate for your CenterYProperty.

I suggest you get a hold of the SLDP snippet from here and always use that to add DPs. (There is one typo in the code it generates, but the snippet it easy to fix).