Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

A simple animation button in Silverlight

0.00/5 (No votes)
26 Nov 2008 1  
This article shows you how we can create an animation button in Silverlight.

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.

silverlight animation button

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

silverlight animation button

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

silverlight animation button

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

  • 27th November, 2008: First post.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here