Does anyone else here like the Windows Media Player UI besides me? I have to admit that I’m a sucker when it comes to rich dark colored UI’s. I love black and I love the glass effect.
[screen shot of my Windows Media Player 11 - Beautiful and black!]
What really stands out for me are the buttons, the glowing glass buttons. Mesmerizing, elegant and perfectly functional. Hover over a button and it glows blue, or red depending on the type of button.
I’m going to recreate these beautiful glass buttons in Blend. I’ll do it in such a way that the glow can be controlled programmatically, so you can set it to what ever you want 
[20 minutes later]
Here’s the result of my Blending, they are just xAML assets that haven’t been animated …
Picture (above): Default button
Picture (above): Blue glowing button
Picture (above): Red glowing button
So now begins the fun bit, explaining how I created these!
Step 1: Create the outline for the button as a “black shape” with rounded corners. Duplicate this 4 times and name the layers as follows:
darkBackground Layer: This pretty much stays as is, it will provide the dark background for the actual button. [Important: Opacity for this layer is 100% and it sits as the top most layer]
Step 2: glowEffect Layer: This is the eye candy of the whole thing. This layer gives the glowing effect, you can change the color of the glow very easily in this layer. [Important: Opacity for this layer is 100%]
Step 3: ButtonForeground layer. This layer gives the actual button it’s look, it has the shading and it allows the glow to shine through it. [Important: Opacity for this layer is 100%]
Step 4: GlassEffect layer. This layer is the sugar coating for the button. The result is a white shaded rounded rectangle at the top part of the overall button, this is so web 2.0. [Important: Opacity for this layer is 9% - gives the see through glass effect]
Take the original black rounded rectangle and resize it to half it’s original size. Then set it to a gradient brush with 2 color markers as follows:
Now set the gradient direction as follows:
Finally: combining all the layers results in the desired glass button
Overall this took around 20 minutes to create using blend. The fun bit will be to animate it which will come in some future posting. Or better yet one of you guys do it and send me an email and ill reference your sample from here
Source code for the xAML can be found here: GlowingBoard.zip
Link to other cool graphic assets can be found in my “Blend Candy” area.
Enjoy and remember to share what you can, were all still learning SilverLight and Blend!
13 responses so far ↓
Omen // November 9, 2007 at 9:50 am
Sweet - Everything seems be going with the black UI - it does look good. Evrything seems to contrast well against it. Im itching to dive into blend but still got other projects i need to finish off first. I will be going back through your examples when I finally do.
Hey i read this article today and thought of you! -
http://style.uk.msn.com/wellbeing/mindbodysoul/article.aspx?cp-documentid=6600294
I dont know how you manage with so little.
advertboy // November 9, 2007 at 12:42 pm
wow thanks Omen that is me! I live with my sony vaio right next to my bed. As soon as i wake up i power on my Lappy and start browsing! I need help
Kevin Daly // November 9, 2007 at 3:19 pm
Very cool!
I agree with you completely about the niftiness of the WMP 11 look.
I also think dark colours and (subtle) glassy effects used with discretion are a good way to move away from the VB 6 style UI (which is also part of the reason I’m not that bothered by the lack of tons of pre-baked controls with WPF: we don’t need a new way to do the same old thing…a blank canvas so to speak can be a stimulus for the imagination).
Kevin Daly // November 9, 2007 at 3:23 pm
To qualify my last remark…
Kevin Daly // November 9, 2007 at 3:26 pm
Oops, sorry, accidental postback.
As I was saying: To qualify my previous remark…when it comes to Silverlight controls (as opposed to WPF) we still obviously can do with more. Any at all would be nice.
Although I’ll personally be happy if we get input controls and crucially layout panels, especially StackPanel (databinding would be nice too of course)
advertboy // November 9, 2007 at 7:21 pm
Kevin: your points make so much sense! Im glad there are others out there that share my view on the whole pre-built controls thing. I have some fellow silverlight mates that are hanging out for a set of framework controls that basically slot silverlight as a webforms solution that’s cross browser and deployment hassle free! I think that’s such a shame because it can become so much more than that!
I think you gave me fuel for another blog posting..
Ben Hayat // November 10, 2007 at 3:43 pm
Dear LiquidBoy;
I’ve watched some of your videos on YouTube and did some of your Walkthrough and I want to Thank you very much for giving these inspirations to the developers community. I’m a software developer and your work teaches us how to become creative in the sense of UI design rather than code design.
I wanted to share this with you that something that may seem very trivial to you can be a big start for someone else across the globe (literally, in US).
Please keep it coming… Thanks my friend!
Silverlight Cream for November 10,2007 -2 -- #122 // November 11, 2007 at 1:22 am
[...] improves xaml export From Tim Heuer… Expression Design has SP1 out already with more goodness. Blend Candy : Another Blue Glowing Glass Button in the style of Web 2.0 Remember that big honking Green Glass button? Well, Liquid Boy has created a very nice small blue [...]
advertboy // November 11, 2007 at 11:08 am
Ben: Thanks for the kind words. I’ll definetely keep them coming and ill try to make them more often
Whatever-ishere // November 21, 2007 at 5:18 pm
thanks for the GREAT post! Very useful…
Blend Candy - Windows Media Player « Online Advertising, Web Development & General Rantings // January 2, 2008 at 12:22 am
[...] a previous post, “Blue glowing glass button“, I confessed my adoration for the user interface of windows media player 10. I talked about [...]
SC // January 2, 2008 at 4:08 pm
Can you show a pure XAML version that can be used as a Silverlight v1.0 button?
Michael Sync » Silverlight 2 beta1 - Best of SilverlightCream // June 29, 2008 at 4:59 pm
[...] URL: http://advertboy.wordpress.com/…glowing-glass-button-in-the-style-of-web-20/ [...]
Leave a Comment