How to scale down Image with DoubleAnimation

Question

I have DoubleAnimations's to move my Image element from one place to another, however when I've tried adding in another DoubleAnimation to scale the image down, my code breaks, this is my code:

private Point GetAbsolutePosition(UIElement element)
{
   var ttv = element.TransformToVisual(Window.Current.Content);
   return ttv.TransformPoint(new Point(0, 0));
}

private void MoveToSolarSystem_Start()
{
        var imageToMoveToPoint= GetAbsolutePosition(imageToMoveTo);
        var myImagePoint= GetAbsolutePosition(myImage);
        var offsetX = imageToMoveToPoint.X - myImagePoint.X;
        var offsetY = imageToMoveToPoint.Y - myImagePoint.Y;

        var translateTransform = new TranslateTransform();
        myImage.RenderTransform = translateTransform;

        ScaleTransform scaleTransform = new ScaleTransform();
        myImage.RenderTransform = scaleTransform;

        var scaleAnimation = new DoubleAnimation()
        {
            From = 0,
            To = 100,
            Duration = TimeSpan.FromSeconds(2)
        };

        var animationX = new DoubleAnimation()
        {
            From = 0,
            To = offsetX + 50,
            Duration = TimeSpan.FromSeconds(2)
        };

        var animationY = new DoubleAnimation()
        {
            From = 0,
            To = offsetY + 50,
            Duration = TimeSpan.FromSeconds(2)
        };



        Storyboard.SetTarget(animationX, translateTransform);
        Storyboard.SetTargetProperty(animationX, "X");


        Storyboard.SetTarget(animationY, translateTransform);
        Storyboard.SetTargetProperty(animationY, "Y");

        Storyboard.SetTarget(scaleAnimation, scaleTransform);
        Storyboard.SetTargetProperty(scaleAnimation, "X");


        var storyboard = new Storyboard();

        storyboard.Children.Add(animationX);
        storyboard.Children.Add(animationY);
        storyboard.Children.Add(scaleAnimation);
        storyboard.Begin();

}

I receive this error when I debug `Cannot resolve TargetProperty X on specified object.'

Does anyone know what I am doing wrong?

Answer 1

You can assign only one RenderTransform to a control. Fortunately, the CompositeTransform allows you to apply multiple effects at once.

There's two things to change in your code. First, replace the code where you create the transforms, to create only the CompositeTransform:

var compositeTransform = new CompositeTransform();
myImage.RenderTransform = compositeTransform;

(replace subsequent references of translateTransform and scaleTransform by compositeTransform)

The second thing is that the properties names are different on CompositeTransform. So you need to adapt your animations:

 Storyboard.SetTarget(animationX, compositeTransform);
 Storyboard.SetTargetProperty(animationX, "TranslateX");

 Storyboard.SetTarget(animationY, compositeTransform);
 Storyboard.SetTargetProperty(animationY, "TranslateY");

 Storyboard.SetTarget(scaleAnimation, compositeTransform);
 Storyboard.SetTargetProperty(scaleAnimation, "ScaleX");