65.9K
CodeProject is changing. Read more.
Home

A simple animation button in Silverlight

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.42/5 (9 votes)

Nov 26, 2008

CPOL
viewsIcon

62891

downloadIcon

1997

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.