Simulate 3D Buttons on Windows Phone

--Copyright 2010 Travis Feirtag

Introduction

I personally don't think a rectangle is a simple, elegant button. That's what they called it at Mix10 when they were talking about the Metro theme on Windows Phone. I agree that a rectangle is simple but I would never call it elegant (unless of course I was a designer type.) I wanted a nice 3D looking button to use in my Silverlight apps on Windows Phone. Here is my simple, elegant solution :)

Download SE3DButton Source Files

Download SE3DKeypadBeta Source Files

It's an Ellipse

First thing we need is an Ellipse. Okay, it's actually the second thing we need. The first thing we need is to create a Windows Phone Silverlight project. I'll call it SE3DButton. In the "ContentGrid" we're going to add an Ellipse.

It should look like this.

Now we need to add a nice RadialGradientBrush onto the Ellipse.Fill.

This looks much better already. It has a 3D look to it just by adding the gradient brush. I've moved the GradientOrigin more towards the upper left of the Ellipse. This will make sense when we add our EventTriggers.

I'd also like to add a nice gradient on the Stroke as well to enhance the 3D appearance of the button. Now our XAML should look like this.

Now the outside ring has a RadialGradientBrush which gives it a brushed metal look to it with a slight shine. It gives the button an overall appearance of a light source originating in the upper left corner of the screen.

Adding the Storyboard Animations

Now that we have the 3D look we need to add event triggers to the Ellipse to simulate the user pressing the button. This will be done using PointAnimations and DoubleAnimations. However, at the time of this writing, I would normally create these EventTriggers in XAML. Unfortunately there seems to be a problem with the XAML parser in the Windows Phone Beta dev tools. So I will need to do some of this in code. Here's how I would do it in XAML, if the XAML parser was working properly. Incidentally, this XAML works correctly on the desktop.

THIS APPROACH CURRENTLY DOESN'T WORK ON Windows Phone Beta DEV TOOLS - XAMLParseException. THIS **DOES** WORK ON DESKTOP.

The alternative approach is to add the storyboards as resources to the LayoutGrid, load them in code and then hook the MouseLeftButton events of the Ellipse to run the animations. It's actually quite simple.

First we add the storyboards in XAML. We need one storyboard for the MouseLeftButtonDown event and one for the MouseLeftButtonUp event. We use a PointAnimation to move the GradientOrigin of the RadialGradientBrush. And we will use two DoubleAnimations to adjust the RadiusX and RadiusY properties of the RadialGradientBrush. I've set the Duration to zero time some that it happens instantaneously. I've tried adding a duration but it didn't look realistic enough to me.

In the MainPage.xaml.cs file, we need to add two private Storyboard members to the page. We then hook the Loaded event of the page and find the storyboard resources in the LayoutGrid. Finally, we simply hook the MouseLeftButtonDown and MouseLeftButtonUp events of the Ellipse and run the animations when the user presses the button.

It's just that easy. (It would be easier if the blasted XAML parser was working) Now run the application and click on the button. You will see the 3D simulated button react and make it appear that the Ellipse has been pressed by moving the shading. It makes it look like the dome of the button has inverted by changing the shading.

Adding a TextBlock

We should probably put some text on the button. We'll start by adding a TextBlock onto the page and centering it horizontally and vertically. The TextBlock is a UIElement so it will also need to hook the Mouse events. We can simply hook the existing Mouse events and it all magically works. You could probably add a color change to the text to add to the effect. I'll leave that up to the reader to add that functionality.

Creating a Keypad

The previous paragraphs show you how to create a single button on the page. But what if we want to use the button many times. Theoretically, we could copy - paste the same code over and over again. But as we all know, that isn't very good coding practice. We want to create a reusable button control. So that's what we'll do. I'll start by creating a project called SE3DKeypad. And we'll add a ButtonCtrl.xaml user control to the project. Right click the project and select Add -> New Item... Select Silverlight for Windows Phone for Installed Templates on the left and select Windows Phone User Control and name it ButtonCtrl.xaml We're just going to add the same XAML and code that we used in the previous project. One change we will make is that we'll make the Width and Height set to Auto. That way you can change the Width and Height of the UserControl and the Ellipse will change with it. Very cool because you can make it an oval button, if you like. Here's the completed XAML.

Here is the source code. I've added something to the code. We needed a property to be able to set the text of the button. You could also add another property to change the colors of the button as well. Again, I'll leave that to the reader to make the changes. We also need a Click event to occur when the user presses the button. So I've added an event handler for the main app to hook. The ButtonClick event will fire when the storyboard for the mouse down event is completed. I hooked the Completed event on the storyboard. If you'd rather have it fire on the completion of the mouse up storyboard, simply hook the completed event for _sbMouseUp instead.

Here is the source code. I've added something to the code. We needed a property to be able to set the text of the button. You could also add another property to change the colors of the button as well. Again, I'll leave that to the reader to make the changes. We also need a Click event to occur when the user presses the button. So I've added an event handler for the main app to hook. The ButtonClick event will fire when the storyboard for the mouse down event is completed. I hooked the Completed event on the storyboard. If you'd rather have it fire on the completion of the mouse up storyboard, simply hook the completed event for _sbMouseUp instead.

Don't forget that the ButtonCtrl will auto-size the Ellipse so you can make it oval by changing the Width or Height. I think that's pretty cool and makes it a versatile button control.

Conclusion

If you want something better than the boring old rectangular button, consider using an Ellipse and a RadialGradientBrush to spice up the look of your Windows Phone application.