Creating a Storyboard DoubleAnimation for Width property of Rectangle using code C# UWP

Question

I am testing the Storyboard.SetTarget Method. I need to animate rectangle's width and height change. I found Microsoft example, but when I include the code in my program, the Solution does not build and deploy.

I get error like this:

IDE0006 Error encountered while loading the project. Some project features, such as full solution analysis for the failed project and projects that depend on it, have been disabled.

error CS0246: The type or namespace name 'Color' could not be found (are you missing a using directive or an assembly reference?)

When I add namespace like:

System.Windows.Media.Animation

I get error:

error CS0234: The type or namespace name 'Media' does not exist in the namespace 'System.Windows' (are you missing an assembly reference?)

Am I using example not for UWP??

Here is the code from example that I used:

private void Create_And_Run_Animation(object sender, EventArgs e)
    {
        // Create a yellow rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 200;
        myRectangle.Height = 20;
        Color myColor = Color.FromArgb(255, 255, 0, 0);
        SolidColorBrush myBrush = new SolidColorBrush();
        myBrush.Color = myColor;
        myRectangle.Fill = myBrush;

        // Add the rectangle to the tree.
        LayoutRoot.Children.Add(myRectangle);

        // Create a duration of 2 seconds.
        Duration duration = new Duration(TimeSpan.FromSeconds(2));

        // Create two DoubleAnimations and set their properties.
        DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
        DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

        myDoubleAnimation1.Duration = duration;
        myDoubleAnimation2.Duration = duration;

        Storyboard sb = new Storyboard();
        sb.Duration = duration;

        sb.Children.Add(myDoubleAnimation1);
        sb.Children.Add(myDoubleAnimation2);

        Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
        Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

        // Set the attached properties of Canvas.Left and Canvas.Top
        // to be the target properties of the two respective DoubleAnimations.
        Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
        Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

        myDoubleAnimation1.To = 200;
        myDoubleAnimation2.To = 40;

        // Make the Storyboard a resource.
        LayoutRoot.Resources.Add("unique_id", sb);

        // Begin the animation.
        sb.Begin();

Ok, I was using the example for Silverlight.

I found C# UWP sample here:

Storyboard Class and it works now, but it changes the position of rectangle and not the Width. How can I change the transition to be applied to the Width property of Rectangle?

New code is like this:

    private void Create_And_Run_Animation()
    {

        // Create a red rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 20;
        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.
        InfoGrid.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 = 200;
        myDoubleAnimation.To = 300;
        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);
        Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));
        // Set the X and Y properties of the Transform to be the target properties
        // of the two respective DoubleAnimations.
        Storyboard.SetTargetProperty(myDoubleAnimation, "X");

        myDoubleAnimation.To = 200;


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

But I cannot get the Rectangle.WidthProperty right in UWP. Intelli says:

cannot convert from 'Windows.UI.Xaml.DependencyProperty' to 'string'

I can't find the resources on MSDN.

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2018-03-16T10:38:57

cannot convert from 'Windows.UI.Xaml.DependencyProperty' to 'string'

The problem is the Path parameter of SetTargetProperty method is string value. You could not pass PropertyPath to it. You just need to pass the Width string value.

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 20;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));

Storyboard.SetTarget(myDoubleAnimation, myRectangle);
Storyboard.SetTargetProperty(myDoubleAnimation, "Width");
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

If you use the below code to animate with property, you will not see any effects. Because you have made a dependent animation. By default, the animation system won't run a dependent animation. You can still use this animation, but you must specifically enable each such dependent animation. To enable your animation, set the EnableDependentAnimation property of the animation object to true.

myDoubleAnimation.EnableDependentAnimation = true;

For more please refer Storyboarded animations official document.

Creating a Storyboard DoubleAnimation for Width property of Rectangle using code C# UWP

1 Answers