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();
} 
Digg This
Advertisements

About soumya chattopadhyay
I live and work in Seattle, WA. I work with Microsoft technologies, and I'm especially interested in C#.

2 Responses to Five different ways to animate in Silverlight 3

  1. Pingback: Dispatcher and Multi-threading in Silverlight 3 « I.Net

  2. jill says:

    good job, thx)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: