Click here to Skip to main content
15,860,943 members
Articles / Desktop Programming / WPF
Article

A simple animation button in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.68/5 (11 votes)
26 Nov 2008CPOL 62.3K   2K   46   5
This article shows you how we can create an animation button in Silverlight.

Image 1

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:

C#
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Iran (Islamic Republic of) Iran (Islamic Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralDamet Garm Dadash Pin
Samie20097-Feb-14 19:51
Samie20097-Feb-14 19:51 
Generalfeedback Pin
Dharmesh4U19-Mar-09 23:23
Dharmesh4U19-Mar-09 23:23 
GeneralNice, but I think you should creat a new template for your button Pin
cokkiy2-Dec-08 1:53
cokkiy2-Dec-08 1:53 
GeneralRe: Nice, but I think you should creat a new template for your button Pin
waged3-Jul-09 10:02
waged3-Jul-09 10:02 
GeneralRe: Nice, but I think you should creat a new template for your button Pin
cokkiy5-Jul-09 5:03
cokkiy5-Jul-09 5:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.