Create an Animation in Code (e.g. C#, VB .NET, etc)


Sometimes you might want to create an animation in procedural code (e.g. C#, VB .NET, etc) rather than in XAML like in my previous Animation post. I’ve seen a lot of traffic on the Silverlight.net forums asking about this subject so in this post I’ll just show an example.


The following example shows how to create an animation that animates the Canvas.Top and Canvas.Left attached properties of a rectangle.



        public void Create_And_Run_Animation(object sender, EventArgs e)
        {
            // Create a red rectangle that will be the target
            // of the animation.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Width = 200;
            myRectangle.Height = 200;
            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(0.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, “(Canvas.Left)”);
            Storyboard.SetTargetProperty(myDoubleAnimation2, “(Canvas.Top)”);

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

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

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

Run this sample.


Notice that you have to use the Storyboard.SetTarget and Storyboard.SetTargetProperty methods to set these respective attached properties rather than the typical syntax used to set properties. Alternate to using SetTarget you can use Storyboard.SetTargetName.


For more detailed information on using Animations in Silverlight see Animation Overview (Silverlight 2).


Have fun,
Sam Landstrom
Programmer Writer – MSFT

Comments (8)

  1. Christian Merighi on Tweener, Michael Cameron on Tweener, Jose Fajardo shows how to create a spiral in

  2. What if you want to use a single animation object (let’s say DoubleAnimation) to target multiple objects?

  3. ccchai says:

    Storyboard.SetTargetProperty(myDoubleAnimation1, "(Canvas.Left)");

    why the target properties have to be put inside brackets?

  4. saurabhharsh says:

    the code gives me compilation error saying cannot convert from string to System.Windows.PropertyPath [referring to "(Canvas.Left)"]..

    i am adding this method as Loaded="Create_And_Run_Animation" for my Canvas.

    is this the problem??..can’t i create a rectangle myRectangle on the canvas and call this method for MouseLeftButtonDown for the rectangle..i did but this ain’t working too.

  5. Andrey says:

    I am not good at C# at all. If you just give a VB equivalent that would be just great. Thanks.

  6. Nelly says:

    Try 'new PropertyPath("(Canvas.Left)")' instead of "(Canvas.Left)" if you experience compiling errors 😉

  7. Nonoy says:

    ation.

               Rectangle myRectangle = new Rectangle();

               myRectangle.Width = 200;

               myRectangle.Height = 200;

               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(0.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, "(Canvas.Left)");

               Storyboard.SetTargetProperty(myDoubleAnimation2, "(Canvas.Top)");

               myDoubleAnimation1.To = 200;

               myDoubleAnimation2.To = 200;

               // Make the Storyboard a resource.

               LayoutRoot.Resources.Add(sb);

               // Begin the animation.

               sb.Begin();

           }

    Run this sample.