Animate Canvas.Left property - silverlight

Question

I'm trying to animate the left property of my image that is in a canvas.
When I'm doing :
image.SetValue(Canvas.LeftProperty, destX[i]);
this is working.
But when I'm doing :
Animate(image, lastValue, destX[i], 500);
with
private void Animate(Image image, double val1, double val2, double miliseconds)
{
DoubleAnimation myDoubleAnimation = new DoubleAnimation { From = val1, To = val2, Duration = new Duration(TimeSpan.FromMilliseconds(miliseconds)) };
TranslateTransform ts = new TranslateTransform();
image.RenderTransform = ts;
Storyboard.SetTarget(myDoubleAnimation, ts);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(TranslateTransform.XProperty));
Storyboard myMovementStoryboard = new Storyboard();
myMovementStoryboard.Children.Add(myDoubleAnimation);
myMovementStoryboard.Begin();
myMovementStoryboard.Completed += (s, e) =>
{
image.SetValue(Canvas.LeftProperty, val2);
};
}
It's not working
What can be wrong in my Animate function ?
Even if animation can be bad done, the completed event should reset the good value to canvas.leftproperty.
But in my case, something gets wrong.
How would you have done the Animate function ?
Thanks in advance for any help

Answer 1

I did it this way, and it works fine.
DoubleAnimation myDoubleAnimation = new DoubleAnimation { From = val1, To = val2, Duration = new Duration(TimeSpan.FromMilliseconds(miliseconds)) };
//set the target of the animation
Storyboard.SetTarget(myDoubleAnimation, Image);
//set the target property of the animation. Don't forget the ( ) around canvas.left
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("(Canvas.Left)"));
//create the storyboard
Storyboard myMovementStoryboard = new Storyboard();
//add the animation to the storyboard
myMovementStoryboard.Children.Add(myDoubleAnimation);
//begin animation
myMovementStoryboard.Begin();

Answer 2

You're setting Canvas.LeftProperty, but you're animating TranslateTransform.XProperty. These are very different properties, as the translate transform is applied after the layout pass. So the object is laid out in the Canvas using Canvas.Left, but then the TranslateTransform causes it to be drawn shifted from that original origin. What you should do is set the TranslateTransform.XProperty back to val2.
myMovementStoryboard.Completed += (s, e) =>
{
ts.X = val2;
};
That said, the animation should not really fail in the middle, so this extra safeguard should not be necessary.