Click here to Skip to main content
15,867,330 members
Articles / Desktop Programming / XAML

A Glass Orb Button in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.95/5 (28 votes)
31 Mar 2009CPOL5 min read 90.5K   3K   58   14
A detailed walkthrough on how to style a basic Silverlight button into a "Glass Orb" button.

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.

ScreenShot.jpg

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:

XML
<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:

XML
<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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Velicus B.V.
Netherlands Netherlands
Microsoft MVP Client Dev . Founder of http://StoreAppsUG.nl, the Dutch Windows Store apps and Windows Phone apps usergroup. XAML / HTML5 developer. Writer. Composer. Musician.

Twitter
@Sorskoot

Awards / Honers
• October 2010,2011,2012,2013: Awarded Microsoft Expression Blend MVP
• June 2009: Second Place in the WinPHP challenge
• February 2009: Runner-up in de Mix09 10k Challenge
• June 2008: Winner of the Microsoft expression development contest at www.dekickoff.nl

Bio
I started programming around 1992, when my father had bought our first home computer. I used GWBasic at that time. After using QBasic and Pascal for a few years I started to learn C/C++ in 1996. I went to the ICT Academy in 1997 and finnished it in 2002. Until December 2007 I worked as a 3D specialist. Besides modelling I worked on different development projects like a 3D based Scheduler and different simultion tools in C# and Java. Though out the years I've gained much experience with ASP.NET, Silverlight, Windows Phone and WinRT.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Joezer BH10-Jul-13 23:55
professionalJoezer BH10-Jul-13 23:55 
QuestionGood job - thanks for the tutorial Pin
Timothy Byrd24-Aug-12 10:36
Timothy Byrd24-Aug-12 10:36 
GeneralVisual state manager not working for me Pin
Qwertie7-Jun-11 11:21
Qwertie7-Jun-11 11:21 
GeneralMy vote of 5 Pin
Eduardo_David1-Jul-10 23:52
Eduardo_David1-Jul-10 23:52 
QuestionLibrary Conversion Question Pin
blackcat77775-Jan-10 3:36
blackcat77775-Jan-10 3:36 
QuestionHow to do same thing in WPF controls Pin
Member 351700123-Aug-09 4:07
Member 351700123-Aug-09 4:07 
GeneralI'm lost Pin
Member 456543330-Jun-09 8:54
Member 456543330-Jun-09 8:54 
AnswerRe: I'm lost Pin
Timmy Kokke30-Jun-09 9:13
Timmy Kokke30-Jun-09 9:13 
GeneralRe: I'm lost Pin
Member 456543330-Jun-09 11:59
Member 456543330-Jun-09 11:59 
GeneralRe: I'm lost Pin
Timmy Kokke30-Jun-09 20:33
Timmy Kokke30-Jun-09 20:33 
GeneralProblem.. [modified] Pin
Ryleigh14-Apr-09 9:30
Ryleigh14-Apr-09 9:30 
Very nice tutorial. Helped me a ton. I originally had a problem that was silly but found and corrected it on my own.

Again, thanks!

-Ryleigh

modified on Tuesday, April 14, 2009 3:44 PM

GeneralVery nice Pin
Pete O'Hanlon31-Mar-09 2:08
subeditorPete O'Hanlon31-Mar-09 2:08 
JokeRe: Very nice Pin
Paul Selormey31-Mar-09 2:54
Paul Selormey31-Mar-09 2:54 
GeneralRe: Very nice Pin
Dewey31-Mar-09 22:33
Dewey31-Mar-09 22:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.