Programmatic drawing with Silverlight 2 Part 3: Simple Animation

This example shows you how you can make a simple line animation in Silverlight 2. There isn’t much documentation about this yet, so it took some figuring out on how to do this correctly.

Basically these are the steps to create an animation:

• Create a Storyboard object
• Set the Storyboard’s Duration property
• Create a DoubleAnimation object
• Set the DoubleAnimation object’s Duration property
• Add the DoubleAnimation object to the Storyboard object’s children
• Call the static SetTarget method on the Storyboard class and pass it the DoubleAnimation object and the object that will be animated.
• Call the static SetTargetProperty method on the Storyboard class and pass it the DoubleAnimation object and the property of the object that will be animated.
• Set the To property on the DoubleAnimation object. This is object’s property that will be used to animate to.
• Add the storyboard to the layout
• Start the animation by calling Storyboard’s Begin method.

Same steps in code:

Storyboard storyBoard = new Storyboard();
Duration duration = new Duration(TimeSpan.FromMilliseconds(600));
storyBoard.Duration = duration;

DoubleAnimation animation = new DoubleAnimation();
animation.Duration = duration;
storyBoard.Children.Add(animation);

Storyboard.SetTarget(animation, objectToBeAnimated);
Storyboard.SetTargetProperty(animation, "objectToBeAnimated's property");

animation.To = someValue;

LayoutRoot.Resources.Add(storyBoard);

storyBoard.Begin();

Take a look at this example that draws a sequence of lines. I’ve used another property of the DoubleAnimation class: BeginTime. This way all lines are drawn consecutively. The code for this example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace LineAnimation
{
    public partial class Page : UserControl
    {
        private Storyboard storyBoard;

        public Page()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(PageLoaded);
        }

        private void PageLoaded(object sender, RoutedEventArgs e)
        {
            CreateAnimation();
            storyBoard.Begin();
        }

        private void CreateAnimation()
        {
            Line[] lines = new Line[700];
            int durationMillis = 200;
            Duration duration = new Duration(TimeSpan.FromMilliseconds(durationMillis));
            double previousX = 0;
            double previousY = 0;
            int lineCount = 0;            

            storyBoard = new Storyboard();
            storyBoard.Duration = new Duration(TimeSpan.FromMilliseconds(durationMillis * 60));

            for (int i = 0; i < 700; i++)
            {
                double newX = Math.Sin(i*4) * 150;
                double newY = Math.Cos(i*4) * 150;
                newX += 200;
                newY += 200;

                if (i > 0)
                {
                    SolidColorBrush stroke = new SolidColorBrush();
                    stroke.Color = Colors.Black;

                    lines[lineCount] = new Line();
                    lines[lineCount].X1 = previousX;
                    lines[lineCount].Y1 = previousY;
                    lines[lineCount].X2 = previousX;
                    lines[lineCount].Y2 = previousY;
                    lines[lineCount].Stroke = stroke;

                    LayoutRoot.Children.Add(lines[lineCount]);

                    DoubleAnimation animationX = new DoubleAnimation();
                    DoubleAnimation animationY = new DoubleAnimation();

                    animationX.BeginTime = animationY.BeginTime = new TimeSpan(0, 0, 0, 0, lineCount * durationMillis);
                    animationX.Duration = animationY.Duration = duration;
                    storyBoard.Children.Add(animationX);
                    storyBoard.Children.Add(animationY);

                    Storyboard.SetTarget(animationX, lines[lineCount]);
                    Storyboard.SetTarget(animationY, lines[lineCount]);
                    Storyboard.SetTargetProperty(animationX, "X2");
                    Storyboard.SetTargetProperty(animationY, "Y2");

                    animationX.To = newX;
                    animationY.To = newY;

                    lineCount++;
                }
                previousX = newX;
                previousY = newY;
            }

            LayoutRoot.Resources.Add(storyBoard);
        }
    }
}

Read more about Silverlight & Animation

• Animation (Silverlight 2)
• Working with Animations Programmatically (Silverlight 2)