A simple animation button in Silverlight

• Download source (requires EB2 SP1 or VS2008 SP1) - 23.1 KB
• Download demo - 13.7 KB

Introduction

This is a simple tutorial that shows you how to create an animation button in Silverlight 2. I didn't write the XAML code by myself, I used Expression Blend 2.

Using the code

For an animation button with three states, we should first create three storyboards.

Then, in each storyboard, we should create a key frame to show the new state, something like this:

Be careful, we mustn't use the key frames like this:

because the animation will show incorrectly.

After that, we should control the animation with events. I used these methods to do that:

private void buttonGrid_MouseEnter(object sender, MouseEventArgs e)
{
    Storyboard1.Begin();
}

private void buttonGrid_MouseLeave(object sender, MouseEventArgs e)
{
    Storyboard2.Begin();
}

private void buttonGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Storyboard3.Begin();
}

History

• 27^th November, 2008: First post.