[C#]Scale a frameworkelement using a storyboard in UWP does not work

Question

I have created a UWP app that I want to implement the following requirements:
1）First I need to move several animated images from various canvas locations to a specific location
2）Then at the same time scale those images from its current size to zero on both x axis and y axis by the time when it reaches it's final destination.
This is my code:

public static void SendimageHome(FrameworkElement image, double fromX, double fromY, double scale)  
{  
    Storyboard storyboard = new Storyboard();  
    DoubleAnimation animateX = CreateDoubleAnimation(image, fromX * scale, 200 * scale, "(Canvas.Left)", 2);  
    DoubleAnimation animateY = CreateDoubleAnimation(image, fromY * scale, -1 * scale, "(Canvas.Top)", 2);  
    storyboard.Children.Add(animateX);  
    storyboard.Children.Add(animateY);  
    storyboard.Begin();  
}  

private static DoubleAnimation CreateDoubleAnimation(FrameworkElement frameworkElement, double fromX, double toX, string propertyToAnimate, Double interval)  
{  
    DoubleAnimation animation = new DoubleAnimation();  
    Storyboard.SetTarget(animation, frameworkElement);  
    Storyboard.SetTargetProperty(animation, propertyToAnimate);  
    animation.From = fromX;  
    animation.To = toX;  
    animation.Duration = TimeSpan.FromSeconds(interval);  
    return animation;  
}  

Using the above code, I have successfully managed to animate the objects from their current locations to their final destinations but scaling is eluding me. I can't figure out how to scale those images using c# code in UWP.
Thanks for any help.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

In order to scale the images during the animation, first please change the frameworkElement’s parameter type as DependencyObject instead of FrameworkElement type in the CreateDoubleAnimation method. Then please use DoubleAnimation to animate a ScaleTransform which is assigned to the Image’s RenderTransform as following:

public static void SendimageHome(FrameworkElement image, double fromX, double fromY, double scale)  
        {  
            Storyboard storyboard = new Storyboard();  
  
            // image is the target element   
            image.RenderTransform = new ScaleTransform { ScaleX = 1, ScaleY = 1 };  
            DoubleAnimation animateScaleX = CreateDoubleAnimation(image.RenderTransform, 1, 0, "(ScaleTransform.ScaleX)", 2);  
            storyboard.Children.Add(animateScaleX);  
            DoubleAnimation animateScaleY = CreateDoubleAnimation(image.RenderTransform, 1, 0, "(ScaleTransform.ScaleY)", 2);  
            storyboard.Children.Add(animateScaleY);  
  
            storyboard.Begin();  
        }  
  
          private static DoubleAnimation CreateDoubleAnimation(DependencyObject frameworkElement, double fromX, double toX, string propertyToAnimate, Double interval)  
        {  
            DoubleAnimation animation = new DoubleAnimation();  
            Storyboard.SetTarget(animation, frameworkElement);  
            Storyboard.SetTargetProperty(animation, propertyToAnimate);  
            animation.From = fromX;  
            animation.To = toX;  
            animation.Duration = TimeSpan.FromSeconds(interval);  
            return animation;  
        }  
  

Thanks