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

Question

question

elvisxia asked · Oct 30, 2019 at 07:13 AM

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

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.

windows-uwp windows-uwp-runtime

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2019-10-30T08:08:17.907Z

RoyLi-MSFT answered · Oct 30, 2019 at 08:08 AM

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

·

10 |1000 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question