Double Animation - What is TranslateTransform "Width Change" Definition in C# UWP?

Question

I am using MSDN example to setup the animation of Width of a Rectangle in C3 UWP. Here is the code of the sample:

private void Create_And_Run_Animation()
    {

        // Create a red rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 0;
        myRectangle.Height = 20;
        SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
        myRectangle.Fill = myBrush;

        // Create the transform
        TranslateTransform stretchTransform = new TranslateTransform();
        stretchTransform.X = 0;
        stretchTransform.Y = 0;
        myRectangle.RenderTransform = stretchTransform;

        // Add the rectangle to the tree.
        DefaultLayout.Children.Add(myRectangle);
        myRectangle.Name = "myWidthAnimatedRectangle";
        // Create a duration of 2 seconds.
        Duration duration = new Duration(TimeSpan.FromSeconds(2));
        // Create two DoubleAnimations and set their properties.
        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
        myDoubleAnimation.From = 0.0;

        myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));
        Storyboard justintimeStoryboard = new Storyboard();
        justintimeStoryboard.Duration = duration;
        justintimeStoryboard.Children.Add(myDoubleAnimation);

        Storyboard.SetTarget(myDoubleAnimation, stretchTransform);

        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

        // Set the X  property of the Transform to be the target property

        Storyboard.SetTargetProperty(myDoubleAnimation, "X");
        myDoubleAnimation.To = 300.0;


        // Make the Storyboard a resource.
        DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
        // Begin the animation.
        justintimeStoryboard.Begin();
    }

However, on Build, what it does is move the object and not change its width. I need to animate width change.

Xie Steven · Answer 1 · 2018-03-19T05:11:55.630

However, on Build, what it does is move the object and not change its width. I need to animate width change.

Your code was used to animate the Rectangle's position, not its width. You could specify a default value for its width and animate its ScaleTransform.

If you have to use DoubleAnimation to animate its width, you need to set EnableDependentAnimation to true. Please check the following code sample:

private void Create_And_Run_Animation()
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 10;
    myRectangle.Height = 20;
    SolidColorBrush myBrush = new SolidColorBrush(Colors.Yellow);
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    DefaultLayout.Children.Add(myRectangle);
    myRectangle.Name = "myWidthAnimatedRectangle";

    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 0.0;
    myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));

    Storyboard justintimeStoryboard = new Storyboard();
    Storyboard.SetTargetProperty(myDoubleAnimation, "(Rectangle.Width)");
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    myDoubleAnimation.To = 300.0;
    myDoubleAnimation.EnableDependentAnimation = true;
    justintimeStoryboard.Children.Add(myDoubleAnimation);

    // Make the Storyboard a resource.
    DefaultLayout.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    // Begin the animation.
    justintimeStoryboard.Begin();
}

Double Animation - What is TranslateTransform "Width Change" Definition in C# UWP?

1 Answers1