.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

State animation for button in Silverlight using Blend

Posted By:Diptimaya Patra       Posted Date: March 29, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

State animation for button in Silverlight using Blend. Creating a Custom Button and changing the State Animation in Blend 3 in Silverlight.
 

Introduction

In this article I will be discussing about different States of a Control, States represent MouseOver, MousePressed, etc. I will be creating a custom Button and we will see how we can change the animation of different states.

Creating a Simple Silverlight Application

Open up Blend 3 and Create a new Silverlight Application.

image1.gif

Creating Custom Button

Draw a Rectangle of your desirable size.

image2.gif

I have changed the Background as Gradient and changed the RadiusX and RadiusY to 10 each.

image3.gif

Now we will create this Rectangle as a Control. Right Click on the Rectangle and choose Make Into Control from the menu as shown below.

image4.gif

After clicking Make Into Control you can see a dialog box pop up as shown below.

image5.gif

Give a name to your Button style; in this case MyButtonStyle and click OK.
Now you can see a content presenter is added to the control and now we are in Editing the Template mode. The following figures will describe what just happened.

image6.gif

Now if will notice the States pane, you can see different states associated with a button. Like the following figure.

image7.gif

As the above figure says, we have a Base state. Base state is the original state of the Control. And further we have two different categories of states called as Common States and Focus States.

There is a property called Default transition, and by default it is 0.

image13.gif

You can change your desired transition delay, based on your imagination.
Now we will change some of the States like MouseOver and Pressed.

Click on MouseOver and you can see the recording is on now for MouseOver State.

image8.gif

I will just change the gradient to see the MouseOver effect.

After you change something the following changes will be affected.

image14.gif


Now we will change the Pressed State as above.

image10.gif

Stop the recording and click either of the following two to go back to end editing the template.

In this case Click Button.

image11.gif

In this case Click Up Arrow.

image12.gif

That's it you have successfully used the States to change a Custom Button effect. Play around with it more so that you will have a grip on it.

Enjoy Animating.
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend