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.
To edit the template of the button, right click on the button and select Edit Control Parts(Template) and click Edit a Copy…
Create a new Style Resource and name it something nice, ButtonGlassOrbTemplate for example. Click Ok.
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.
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.
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>
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.
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.
Immediately you'll see the color of the button change. If everything went well, it should look something like this.
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.
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:
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.
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.
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.
To give the button a glassy look, a “reflection” is needed. Add yet another ellipse and name this ReflectionEllipse.
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.
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%.
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.
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.
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.
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
