Creating your own cool buttons in Silverlight is actually really easy, and it looks excellent when your whole project comes together with buttons that suit the layout and styles.

All you need to do this is Expression Blend and the Silverlight engine on your machine to complete this tutorial.

Ok so all you need to do to start skinning is create a normal button, right click it,  Edit control parts (template) > Edit a Copy and give the template a name. I’m going to call mine “button1″. (this is cool because you can use this same style over and over on other buttons you create, so name it accordingly i.e. Red Shiny Button)

Alright so now you will see the old button is still there, in the tree at  the side you want to delete the background group so you are left with just a yellow outline where the button was and the text that sits in it. You will also notice the Visual State Manager already has a bunch of states in it (Half the work is already done for us!).

Note: to leave the edit template section, click the base object (in this case “button”) in the bread crumb (top left of staging area) to return to your project. To get back into your template editor, right click the button and go to Edit Control Parts > Edit Template.

Make sure the VSM is set to the Base state. This is the common state which is reflected throughout all the other states. So this is where we build our button.

I’m going to make a nice red shiny button.

I’m going to go over this design bit pretty quickly because this is up to how you want the button to look.

Note: if you wish to use images for your button, go to Tools in the top menu, and click add existing item, then just drag it over from your project tree tab (top right of blend).

So just make a red rectangle, and use the RadiusX and RadiusY parameters to round the edges a little. I am adding a light stroke to it, 1px thick of black. Also i have added a gradient to the rectangle.

Inside that rectangle draw another one, with the same X Y radius settings as the first.

Align it to the top left, have a padding of about 2 px, and then change the width to fit nice and symmetrical within your box. Add a gradient from white to clear on that rectangle and set the opacity to about 50%.

do the exact same thing again, new rectangle inside again, with a padding of about 4px, make it symmetrical and then gradient from white to 50% white (set the alpha on the second white)

Make sure all those boxes you have just made sit behind the content presenter (you could probably sit some of the “shine” rectangles over the content if you want though.

So now we have a decent looking button, but when you run the app it just sits there static, so lets do some subtle animations to bring this button to life.

We have 2 different states that we will use today: MouseOver and Pressed. The other items we don’t need to edit. (the disabled state will simply grey out your button, feel free to edit it or any other items, the normal state is the same as the base state as well so there isn’t much reason to edit it.)

So first we need to organise what happens when the mouse hovers over the button, so select the MouseOver state and start editing your elements. For the MouseOver i find a subtle edit to the gradient works best. I’m just going to bring up the darker colour on the base rectangle a little.

I have change the bottom colour from #FF490101 to #FF800606 which is very subtle.

And for the pressed I’m going to darken the whole gradient a little on the base rectangle.

Give it a test (F5) and check out your new button!

You will notice that it just flicks straight from one state to another, no grace at all, this is really easy to fix, on your VSM in edit template mode, all you need to do is edit the 0s next to CommonStates. As you can see I have set mine to 0.2s. Its up to you how long you wish the transitions to take.

To change the text on the button, exit out of your template editor and click the button, in the properties on the right side, just edit the “content” parameter. And if you want to edit the colour of your text, just select the button outside of the template editor and change the foreground colour.

Easy!

If you have any questions about it, just let me know!

Oh and just remember! you only have to do this once, then you can add this template to the rest of your buttons that need to look the same… Just right click on your newly created button and go to Edit Control Parts > Apply Resource and select the name of your template.

Thanks

- Alex -