Geeks With Blogs

@Sorskoot
  • Sorskoot "Visual Studio 2013, will be available later this year, with a preview build publicly available at Build" http://t.co/SV28646Qr6 about 448 days ago

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

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 example below shows the result.

 

 

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 build 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 folowing 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

Immediatly 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 GradienStop to Black, with an alpha of 60%. Last step, add a GradientStop at the middle and set it’s 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 ellipses.step13-AddRadialGradientEllipse

Set the Stroke brush of this to none and the fill color to a GradientBrush again. Set the Gradienttype to radial by clicking on the little sqare 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-AddReflectionEllipseThis one goes on top of the contentPresenter. Set the Grid Row and Column to 1. Set the RowSpan and ColumnSpan to 1 also.   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 also, 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

  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 transparant, alpha of 0%. 

step17-AddGlowEllipse

Place the GlowEllipse at the second row in the grid, Row 1. Give it a RowSpan of 2 streching 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 GlowEllips 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 elemens 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 is 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.

 

You can download the code for this at my SkyDrive

Posted on Tuesday, March 17, 2009 3:24 AM Silverlight | Back to top


Comments on this post: A Glass Orb Button in Silverlight

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
Thanks. This is great!
Left by VB on Mar 17, 2009 4:45 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
A nice example of templating in Blend. Well done!
Left by Joel Cochran on Mar 17, 2009 9:16 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
Seems counter intuitive to have the button grow large when clicked...

Shouldn't it press in and therefore get smaller?
Left by Rory Becker on Mar 18, 2009 1:26 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
Really awesome work - thank you very much for sharing it.

David Roh
Left by David Roh on Apr 03, 2009 2:58 AM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
hi, you didnt mention about the content presenter, How to change the text color?
Left by Garry on Jul 19, 2009 4:40 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
Hi Garry, changing the text color on the button hasn't changed when applying the templates. By using the content presenter the button keeps working as it should.
Left by Timmy Kokke on Jul 19, 2009 7:06 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
Hello.
How to add content layer?
I can t see any text above the button.

Thx
Left by Nyoko on Nov 05, 2009 12:49 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
I tried all steps expect Moouse Over, and Pressed state because i am no able to record the state because.

When I trying to record this state ->"I will get an Stack over flow error" please help to correct this error.

With Regards,
Gautham
Left by Gautham on Feb 19, 2010 3:24 PM

# re: A Glass Orb Button in Silverlight
Requesting Gravatar...
thank you. it very cool.
Left by spam-dev on Jun 09, 2010 9:39 AM

Your comment:
 (will show your gravatar)
 


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net | Join free