The NiftyButton

Quick and dirty today -- a nice, easy way to create a button that looks kind of 3D, kind of nice, and can be done very quickly, even if you throw away that ugly chrome. 

The situation: you want your buttons to have a little bit of style.  You're not an uber-artist, but you'd love the illusion of 3D, you want it to act right, and throwing away the default chrome on a button takes away the built-in nice functions.

Start by dropping a button on your artboard.

You end up with this run-of-the-mill, boring gray button.  Edit a copy of the template and delete that horrible chrome.  Of coruse, this leaves you with an empty button, so add a grid (so you can put more than one thing in it), and inside that grid put a rectangle and a ContentPresenter.  The rectangle is your background, and you can do with it as you wish.  I made mine green and gave it nice, rounded edges.  To give the illusion of 3D, give it a BitmapEffect (expand the Appearance properties area), and chose a bevel bitmap effect. 

 The starting position for the button should be up, so chose your EdgeProfile to be linear, and pick a small bevelwidth, like 2.  The effect is subtle, but noticable. 

Now select the Template, and add a property trigger.  The "Activated when" should read target-element.IsPressed = true. 

With the recording active (and it should be now), select your rectangle and go to the bevel property.  Change the EdgeProfile to BulgedUp; the button now looks like something is pushing it down a bit.  I recommend also giving a color clue.  In my case, I made the color slightly lighter. 

Now remember to shut off the property recording, go back to the main project, and build.  The effect is nice, and was simple to create.  You can add another property trigger for IsFocused, though I recommend a more subtle effect, like changing the stroke of the rectangle to a bright color (and thickening it a bit so you can see it), or changing the color slightly.