Creating a Custom Button - Page 3
       by kirupa  |  22 November 2008

In the previous page, you converted your image into a button and edited the button's template. In this page, we will wrap things up by adding the rollover effects that you need.

Adding States - Using the Visual State Manager
Ok, you are now ready to make visual changes that appear when you interact with your button. Each such visual change is represented by what is known as a State. You can view the states your button currently has defined by looking at your States panel found in the Interaction pane:

[ the Interaction panel contains the states that your button exposes ]

Because the control in question is a Button, the internals of your Button class contain states for Unfocused, Focused, MouseOver, Normal, Pressed, and Disabled. What this means is that, when your button is (for example) disabled, then your button will find itself in the Disabled state and have the look that this state defines. The same applies for all of the other states you see displayed.

There is an odd one though. You also have a state known as Base, and this base state is how your control would look like if you did absolutely nothing to it. It is the default state that gets selected initially and the state you will always return to if you want to make modifications that go beyond just the limited lifespan of a single state.

The states we are interested in are the ones for MouseOver and Pressed. The Normal state is important as well, but we'll just leave it equivalent to that of our Base state. In other words, when a state is not modified, its properties are equivalent to the properties specified as part of your Base state.

Let's deal with our MouseOver state first. With your mouse, click on the MouseOver entry in your States panel:

[ click on the MouseOver state first ]

When you click on it, notice that you will go into the State recording mode. This means that any changes you make to your artboard will only be reflected in the state you are currently editing. In this case, any modifications you make will only be visible when your button is in the MouseOver state.

Anyway, select your image on the artboard. With the image selected, make it smaller by resizing it using the adorners. Be sure to hold down the Alt key to constrain your current aspect ratio and scale from the center:

[ make your image smaller ]

That's all there is to it. From your States panel, if you click on your Base state, notice that your image is larger and back to its original size. When you click on MouseOver, the image shrinks to the size you gave it a few seconds ago.

If you hit F5 and preview the animation, notice that your image shrinks in size when you hover it - just like you want:

[ when you preview, your image gets smaller when you mouse over it ]

The only state we have remaining is the Pressed state. From your States panel, select your Pressed state. What we want to do is make our image small just like before. The only variation is that the image will be scaled down to be even smaller!

Use the resize adorners in conjunction with the Alt key to make your image smaller than what it was in the earlier MouseOver state:

[ your image is even smaller in the Pressed state ]

If you test your animation now, your button will shrink in size when you hover over it, and when you press down on your mouse, the button will shrink even further. Great.

There is one last thing that needs to be done. If you noticed, the transition between your Base/Normal, MouseOver, and Pressed states is very sudden. Ideally, you want to give your animation a chance to gracefully go from one state to another without suddenly jumping to it.

The solution to this is very simple. You need give your Visual State Group your states are under a duration. The states that you modified are all under the CommonStates state group:

[ a duration given to a state group carries over to all states within that group ]

To the right of your CommonStates State Group name, you will see a text field that you can specify the duration of your states. Change the value from 0s to .2 (or .2s):

[ enter a .2 in the duration field next to CommonStates ]

If you preview your animation now, you will notice that the jump between the various states occurs more gradually - .2 seconds more gradually to be precise.

Phew - you are now done! If you want to continue modifying more of your Button's template, be sure to return to the Base state first unless you want your modifications to be visible only in the state you currently have selected.

To return to your main application and make changes outside of your template, simply use the breadcrumb bar to return to your root Page.xaml's UserControl:

[ you can go back to the root of your UserControl by using the breadcrumb bar ]

Conclusion
This tutorial took you through a whirlwind tour of various little things that you needed to do to have an image change how it looks when you interact with it. I have posted the source file to my version of what you just created, so download it from the below location:

Download Source Files

1 | 2 | 3