Download source - 10 KB

Introduction

A nice thing about Silverlight is the ability to redesign almost everything. Today I would like to show you how to make a Glass Orb style button in Expression Blend. The image below shows the result.

Styling the Button

You can start in any Silverlight 2 project, for the sake of simplicity I started an empty project. Just add a standard Silverlight button on the panel. The glass button style we're about to create looks best on a square button, thus give the button a width and height of the same value, like 64.

Step1-DrawANewButton

To edit the template of the button, right click on the button and select Edit Control Parts(Template) and click Edit a Copy…

Step2-EditTemplate

Create a new Style Resource and name it something nice, ButtonGlassOrbTemplate for example. Click Ok.

Step3-CreateStyleResource

You're looking at the default button template now. As you can see, it’s built of some basic components: a few Grids, a Borders, some Rectangles and a ContentPresenter.

Step4-DefaultTemplate

That’s all very nice… We don't need them, so delete everything except the root Grid and the ContentPresenter. Ignore the message about States being invalidated. We'll fix those later.

Step5-EmptyStyle

For the button to scale properly, the best thing to do is configure the Grid with the percentages. I used the following dimensions for the rows and columns in the example:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.15*"/>
    <ColumnDefinition Width="0.7*"/>
    <ColumnDefinition Width="0.15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="0.04*"/>
    <RowDefinition Height="0.4*"/>
    <RowDefinition Height="0.56*"/>
</Grid.RowDefinitions>

Step6-ButtonGridLayout

To add the overall coloring of the button, add an ellipse to the stack. Make sure the Grid Row and the Column are 0 and the RowSpan and ColumnSpan are set to 3 to make it fill the entire grid.

Step7-BackgroundEllipse

To be able to change the background color like you would with the original button, you have to bind the fill and the stoke color to the background color. To do this, click the little square next to the fill brush and the stroke brush and select Template Binding and click Background.

Step8-Advanced Options

Step9-TemplateBindingBackground

Immediately you'll see the color of the button change. If everything went well, it should look something like this.

step10-ButtonLooks

To create the glass effect, we have add a couple of gradient layers. To create the first one, add another ellipse to the stack and name it VerticalGradientEllipse. Place it between the contentPresenter and the BackgroundEllipse.

Step11-AddVerticalGradientEllipse

The grid settings are similar to the first ellipse. Change to fill brush to gradient. Keep the default gradient direction, top to bottom. Set the first GradientStop to be White, with an alpha of 25%. Than, set the end GradientStop to Black, with an alpha of 60%. Last step, add a GradientStop at the middle and set its alpha to 0%. This creates the following XAML:

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#3FFFFFFF"/>
    <GradientStop Color="#00787878" Offset="0.5"/>
    <GradientStop Color="#99000000" Offset="1"/>
</LinearGradientBrush>

To make the border look slightly darker than the background, set the Stroke color Black, with an alpha of 50%.

By now, the button should look something like this:

step12-ButtonLooks

Add another ellipse with the same grid configuration as the last one. Name this one RadialGradientEllipse. Place it between the VerticalGradientEllipse and the contentPresenter elements.

step13-AddRadialGradientEllipse

Set the Stroke brush of this to none and the fill color to a GradientBrush again. Set the Gradient type to radial by clicking on the little square icon just below the first GradientStop.

stepI-SwitchGradient

Set the first GradientStop to White, with an alpha of 40% and the last GradientStop to Black with an alpha of 60%. By now the button starts to look like a sphere.

step14-ButtonLooks

To give the button a glassy look, a “reflection” is needed. Add yet another ellipse and name this ReflectionEllipse.

step15-AddReflectionEllipse

This one goes on top of contentPresenter. Set the Grid Row and Column to 1. Set the RowSpan and ColumnSpan to 1 too. The stroke brush has to be set to none. Use a GradientBrush for the Fill. For the first GradientStop I used a full white with an alpha of 73%. The GradientStop at the end is white too, but with an alpha of 0%. By now the button should have that glossy look. This would be a nice moment to leave the template editing mode for a second and try out some different colors on the button.

step15b-ReflectionEllipseLayout step16-ButtonLooks

States

The last thing this button needs is some effects for MouseOver and clicks. By removing all default elements in the template, the states of the button are cleared. The first state to add is the MouseOver state. In this example, I tried to give the impression of a light shining at the bottom of the sphere. Start by adding another ellipse to the stack. Name this GlowEllipse and place it between the RadialGradientEllipse and the contentPresenter. Set the stroke brush to no brush and the fill to a GradientBrush. Start the gradient with a darkish yellow color with an alpha of 75%, like #BFFFD200. End the gradient with the same color but full transparent, alpha of 0%.

step17-AddGlowEllipse

Place the GlowEllipse at the second row in the grid, Row 1. Give it a RowSpan of 2 stretching it all the way to the bottom. Make it span the entire width of the button by setting the Column to 0 with a ColumnSpan of 3. To make sure it stays a bit away from the borders of the button, set the left and right margins to 5, the top margin to 13 and the bottom margin to 3. The button should now look like this.

step18-ButtonLooks

To animate the button when a MouseOver event occurs, expand the states panel and make sure the Base state is still selected. Set the Opacity of the GlowEllipse to 0%. This would hide the glow. Now select the MouseOver state.

step19-MouseOverState

A red border appears around the editing area, indicating that changes to the Properties of elements are recorded. Set the Opacity of the GlowEllipse to 100%. Now, when the mouse is hovering over the button, the GlowEllipse will be shown. For the Pressed state, I chose to make to button grow a little. To record the Properties of the Pressed state, first select Grid layer in the stack and select the Pressed state from the States panel.

step20-PressedState

Change the X and Y scales to 1.1 to make it just a little bigger. To keep it consistent with the MouseOver state, also set the Opacity on the GlowEllipse to 100% in this state. Set the transaction duration to 0.2 second to give a little time to go from state to state.

At this point, you should have a replica of the button shown in the example on top of this page. Feel free to experiment with the settings, and add the other states of this button.

History

March 31, 2009: Initial upload

A Glass Orb Button in Silverlight