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

Top 5 Contributors of the Month
Sandeep Singh
Melody Anderson
Eminent IT

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.


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.


Creating Custom Button

Draw a Rectangle of your desirable size.


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


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.


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


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.


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


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.


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.


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

After you change something the following changes will be affected.


Now we will change the Pressed State as above.


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

In this case Click Button.


In this case Click Up Arrow.


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:


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