Five different ways to animate in Silverlight 3

There are a variety of ways to animate an object in Silverlight, let’s take a look at them today. For demo purposes say we’re trying to move a simple rectangle defined in xaml like this,

<Canvas x:Name="LayoutRoot" Background="White">
        <Rectangle x:Name="MyRectangle"  Canvas.Top="100" 

                   Canvas.Left="100" Height="50" Width="50" Fill="Black" />
</Canvas>

1. Using Storyboard.Begin():

// Animate the canvas left property
DoubleAnimation daLeft = new DoubleAnimation();
daLeft.To = 200.0;
daLeft.Duration = new Duration(new TimeSpan(0, 0, 0, 1));

// Set the storyboard target and target property
Storyboard.SetTarget(daLeft, MyRectangle);
Storyboard.SetTargetProperty(daLeft, new PropertyPath(Canvas.LeftProperty));

// Add the animation to the storyboard and start it
Storyboard st = new Storyboard();
st.Children.Add(daLeft);
st.Begin();

2. Using an empty Storyboard as a timer:

Storyboard emptyStoryboard = new Storyboard();

public MainPage() {
    InitializeComponent();

    emptyStoryboard.Duration = TimeSpan.FromMilliseconds(0);
    emptyStoryboard.Completed += new EventHandler(AnimateRectangle);
    emptyStoryboard.Begin();
}

void AnimateRectangle(object sender, EventArgs e) {
    // Animate the canvas left property
    MyRectangle.SetValue(Canvas.LeftProperty, 

                                (double)MyRectangle.GetValue(Canvas.LeftProperty) + 1.0);

    if ((double)MyRectangle.GetValue(Canvas.LeftProperty) > 200.0)
        emptyStoryboard.Stop();
    else
        emptyStoryboard.Begin();        
}

3. Using System.Windows.Media.CompositionTarget.Rendering:

public MainPage() {
    InitializeComponent();

    CompositionTarget.Rendering += new EventHandler(AnimateRectangle);
}

void AnimateRectangle(object sender, EventArgs e) {

    // Animate the canvas left property
    MyRectangle.SetValue(Canvas.LeftProperty, 

                                (double)MyRectangle.GetValue(Canvas.LeftProperty) + 1.0);

    if ((double)MyRectangle.GetValue(Canvas.LeftProperty) > 200.0)
        MyRectangle.SetValue(Canvas.LeftProperty, 200.0);
}

4. Using a System.Windows.Threading.DispatcherTimer:

private DispatcherTimer Timer = new DispatcherTimer();

public MainPage() {
    InitializeComponent();

    Timer.Interval = TimeSpan.Zero;
    Timer.Tick += new EventHandler(AnimateRectangle);
    Timer.Start();
}

void AnimateRectangle(object sender, EventArgs e) {            

    // Animate the canvas left property, this is UI-thread safe            
    MyRectangle.SetValue(Canvas.LeftProperty, 

                                (double)MyRectangle.GetValue(Canvas.LeftProperty) + 1.0);

    if ((double)MyRectangle.GetValue(Canvas.LeftProperty) > 200.0)
        Timer.Stop();
}

5. Using a System.Threading.Timer:

Timer Timer = null;

public MainPage() {
    InitializeComponent();

    Timer = new Timer(Animate, null, 0, 1); 
}

void Animate(object state) {

    // This is required because the Animate method is called on a different thread than the UI
    Dispatcher.BeginInvoke(new Action(AnimateRectangle));
}

void AnimateRectangle() {

    // Animate the canvas left property 
    MyRectangle.SetValue(Canvas.LeftProperty, 

                                (double)MyRectangle.GetValue(Canvas.LeftProperty) + 1.0);

    if ((double)MyRectangle.GetValue(Canvas.LeftProperty) > 200.0)
        Timer.Dispose();
}