Share via

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

  • Article

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

  • Anonymous
    March 25, 2008
    Christian Merighi on Tweener, Michael Cameron on Tweener, Jose Fajardo shows how to create a spiral in

  • Anonymous
    March 26, 2008
    What if you want to use a single animation object (let's say DoubleAnimation) to target multiple objects?

  • Anonymous
    April 01, 2008
    You can programmatically change the TargetProperty to different objects: http://blogs.msdn.com/silverlight_sdk/archive/2008/03/26/target-multiple-objects-properties-with-one-animation-silverlight.aspx

  • Anonymous
    April 01, 2008
    Storyboard.SetTargetProperty(myDoubleAnimation1, "(Canvas.Left)"); why the target properties have to be put inside brackets?

  • Anonymous
    June 11, 2008
    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.

  • Anonymous
    August 25, 2011
    I am not good at C# at all. If you just give a VB equivalent that would be just great. Thanks.

  • Anonymous
    September 04, 2013
    Try 'new PropertyPath("(Canvas.Left)")' instead of "(Canvas.Left)" if you experience compiling errors ;)

  • Anonymous
    March 11, 2015
    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.