Animating States of Button In Blend 3


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.

image11.gifIn this case Click Button.

image12.gifIn 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.

Up Next
    Ebook Download
    View all
    Learn
    View all