Creating a Glass Button: The Complete Tutorial


Well, it was a while back that I posted the first Creating a Glass button tutorial. Of course, that was based on the old look of Sparkle, and I have had some feedback recently that the project doesn’t run anymore. Also, the completed tutorial never ‘made it to press’ leaving people with a rather lifeless button.


Well folks – GREAT NEWS – I have finished working on a all new glass button. And what better design to follow than some of the glass buttons in our shiny new OS.


Windows Vista task bar 


The Windows Vista taskbar has some real nice buttons – they are see through and have an internal glow. So, I though I would base my all new complete glass button tutorial on these babies. I also hope there is enough content in the tutorial to help you explore other designs and other controls.


picture of the glass buttons app runing


So, attached to this post are the full instructions for creating the buttons above. I have also attached the finished project if you want to explore what I have done. 


This has been a while coming, so please enjoy!


 

CreatingTheGlassButton.zip

Comments (79)

  1. Mark Haliday says:

    This is really good!  Thanks a bunch.

  2. You’ve been kicked (a good thing) – Trackback from DotNetKicks.com

  3. hello, my name vibol, i very interested in this control, but it can run on C, i want run on vb 2005, so how do i do. can you make sample (vb 2005) for me? if can, please attach this control and sample project to me.

    thanks

    svibolcomputer@yahoo.com

  4. martin.grayson says:

    Hi Vibol,

    Somebody has already created a GDI+ version of this!

    http://www.codeproject.com/cs/miscctrl/glassbutton.asp

    Check this out, and hope it helps!

    Martin

  5. flipmokid says:

    Hi Martin,

    Thanks a lot for this! I’m a programmer and wanted to do style some components for my application but upon opening Blend and was instantly confused with how to use it. Your tutorial has helped me a lot in figuring out Blend and I am very grateful. I still have the document on standby when I start styling new components ๐Ÿ™‚

  6. martin.grayson says:

    My pleasure. I am working on some new content exploring how to style some more complicated controls too, like scroll bars, tab controls, combo boxes etc, so please watch this space!

  7. Donald Burnett has an interesting piece call Poor, maligned, and misunderstood by many: WPF/E which I

  8. flipmokid says:

    Hi Martin,

    Excellent, I can’t wait for the scroll bar tutorial as I need to style one soon and from the discussions I’ve seen on the internet it doesn’t appear to be easy.

  9. To view a sample or tutorial, click on one of thumbnails or links below. Some samples also have supporting

  10. Bryant has an interesting post about using ASP.NET server controls to project WPF/E XAML instead of HTML

  11. Robb Allen says:

    Nice tutorial. It’s a good way to understand Blend a little better too.

    I’m going to try to create a round "sphere" button as well, using some of the same techniques when I have time. I’ll also document my process and put it out for the world to see.

  12. Joe's Blog says:

    Martin Grayson has a fantastic tutorial on creating a "glass" button in WPF using Expression Blend .

  13. Neal Hudson says:

    Hey Martin,

    Thanks for this tutorial – it’s provided me with a great insight into how to use Blend – also your screencasts on Channel 9 were very informative.

    I’ve a question – how would you go about making this glass button part of the ComboBox template?

  14. Chris says:

    Beautiful!  Awesome!  I can’t wait to dig into this!

    Chris

  15. martin.grayson says:

    Cheers all.

    Neil – on the combo box piece, I am working on a tutorial to do stuff with these more complex controls – including sliders, scrollbars etc.

    Martin

  16. WynApse says:

    Silverlight Buttons and Pushbutton Discussion

  17. Anders says:

    Great tutorial! Thanks a lot!!!

  18. Sven says:

    Hey this is VERY GREAT. I just implemented this glass style for a TabControl/TabItems in WPF – very nice!

  19. Karl says:

    Awsome work!  

    I was trying to learn how to make a Vista looking Taskbar when I ran into your work here I was really impressed.

    Thank you for putting all the time into the tutorial and sharing it with us.

    So, to make a taskbar all I needed to do, was to modify the target control type and trigger :

      <Trigger Property="IsPress" Value="True">

    and change to :

      <Trigger Property="IsChecked" Value="True">

    and PRESTO, I have a Vista taskbar buttons.  

    Just loaded up my new and WPF’d togglebuttons into a stack panel and I have a Vista taskbar.

    Have a great day!

    Karl

  20. Jeremy Chaney says:

    How do I add an image and a label to the glass buttons? When I add one, Blend removes the other…?

  21. During the weekend I spent some minutes to collect some of the greatest Silverlight examples. Most of

  22. Lee says:

    I would also like to know how the image is added.

    Thanks!

  23. Lee says:

    Jeremy, to add the images and text, double click the button and then add a stack panel.  If you change the orientation to horizontal you can add an image and a label.  Hope this helps.

  24. icedre says:

    Very cool !?!

    Thanks a lot! I want more stuff about WPF… It’s so cool :-))

    THX

  25. Marie says:

    Awesome, very useful. I haven’t found anything else yet that tells me simply how to use blend and what one might do with all these fancy graphical options available. Previously I have been struggling with writing bits and pieces in xaml, but have been wanting to do it graphically in Blend to see what I am really doing as I do it, and to not have to worry about syntax as well as making it look good.

    Great how you go through every step and I picked up a few little shortcuts regarding the things i know how to do as well.

  26. Bryan Chow says:

    ๅˆ†ไบซๅ‡ ไธชๅ›ฝๅค–็š„silverlightไพ‹ๅญๅ’Œblog GreatVisualStudioQuickStarts

  27. Jack says:

    Reallt good tutoriafor website design – cheers.

  28. David says:

    Great tutorial. I can’t wait for the same kind of styles for other controls… I’m trying, but I still have to learn a lot. Hope to read your new tutorials soon ๐Ÿ˜‰

    Cheers!

  29. sofiene says:

    it’s exciting Working with aero Glass

  30. Daria says:

    Thank you very much for your tutorial!!!

  31. Godwin says:

    Thanks for the tutorial mate! Great work…

  32. loch says:

    Seems like the word document is only 2 pages and the tutorial is cut off…

  33. loch says:

    scratch last comment, my bad, word was set to web layout

  34. markovich says:

    Hi Martin,

    Excellent, I can’t wait for the scroll bar tutorial as I need to style one soon and from the discussions I’ve seen on the internet it doesn’t appear to be easy.

  35. Srinivas says:

    Hi

      Time line is moving bit by bit not moving constantly how to change…

    How to give link while but click…

  36. nazzinha says:

    Hi,

    I´m brazilian and we don´t have anyone here to help us… your tutorial has helped a lot!!!

    Obrigada!!! Thank you!!!

  37. KP says:

    Hi Martin,

    Thank you very much for such a nice control. It’s really cool.

    I found one thing in this glass button example, I don’t know it is an issue or not. The problem is underscore(_) is the char used for access keys in WPF applications. But when I am using the glass button as Template then I am unable to set this access key to my button. Can you plz help me in this regard?

    Thanks,

    KP

  38. Karthik says:

    Hi Martin,

      I found your article very impressive and easy to learn. Using your tutorial I was able to create the button and in the process learn Blend. I have a doubt in the sense, is it possible to use the same template for an Image box. If I set the ContentProperty of the Button to a Image, the image appears very small. The work around will be to have a MinHeight and MinWidth for the image but that will screw the whole ideology. So is there a way to change the template for an Image box ?

  39. Saragani says:

    Ok, I managed to create a template… Now what??

    I want to use those glass buttons on other WPF applications I create. How to I export and import the template?

    Sorry, I’m still a n00b with WPF.

  40. Tom says:

    Looks great but it would be better if you implemented it as a custom control so it could be reused easier…

  41. Op de blog van Martin Grayson heeft hij een stap-voor-stap handleiding geschreven hoe een button kan

  42. S.Christy Rajan says:

    hi  Martin Grayson

    I am christy rajan.  Really this article is very interest.

    Is it possible to create this kind of controls using .NET framework 1.1 ?

    If so, please kindly give me the details

    Thanks

    christy.

  43. suresh says:

    You are excellent mike. Your tutorial is very useful for me and I love so much.

  44. Suresh says:

    Sry Martin. I mispelled your name.

  45. Work at home jobs. Marketing http://www.work-at-home-tonight.com. Work from home. Internet home work income business. Home based business work. Internet work at home scams.

  46. Wael A.Salem says:

    hi  Martin Grayson

    I am Waeil A.Salem.  I want to say thanks for your good job.

    But I am wondering if Is it possible to create the glass effects on the websites to look  like microsoft’s websites -by using blend,sirverlight – if so , how can I do that

    , please kindly , show me the way

    Thanks

    Wael.

  47. Ultram er. says:

    Ultram er. Ultram er drugs. Ultram-er.

  48. I found this last night and it’s awesome.  The detail is my favorite part.  Left nothing to the imagination.  I enjoy writing walkthroughs myself, and I know how tedious it can be, especially with screenshots.  Wonderful job!!  Thanks!

  49. prog1 Blog says:

    &lt;p&gt;Windows Vista macht optisch einiges her. Klar dass man sich fragt, wie die eigene Anwendung sich ein St&#252;ck davon abschneiden kann. Sch&#246;n anzuschauen sind auf jeden Fall die Glass Bu …

  50. Emil says:

    Thanks Martin.

    Since it’s related — here’s a small sample of how to use Vista glass with WPF: http://www.emilstefanov.net/Programming/VistaGlass.aspx

  51. Hello Martin!

    Your tutorial is amazing, thanks for sharing! And a BIG thank you for sharing the source files of the final result.

  52. martin.grayson says:

    Hey all, thanks for the continued comments on this post. I really need to get on with some other Blend based posts.

    Let me try an respond to some of the comments above….

    Emil – thanks, there is also a vista glass post somewhere on my blog – called ‘A pane in the Glass’ –  get it?

    Garrison – hey thanks, it was a little lengthy, thats why it takes a while to get enough time to produce even more complext ones – i will probably move towards video tutorials in the future, what do you think?

    Wael – yes you can use a very simliar looking button template in Silverlight for your websites. The technology – Silverlight ๐Ÿ™‚

    Suresh – i forgive you ๐Ÿ™‚

    S. Christy – you would need to do something with GDI to get the same effect in .NET 1.1, see one of my earlier comments for info.

    Tom – this tutorial is about creating a template, creating a custom control would not make reuse any easier, in fact, it would introduce the extra complication of C#. Templates are reusable… <Button Tempate="{You resource name here} />.

    Saragani – you want to put your template in a resource dictionary that you share across projects.

    Will try to reply to more next time ๐Ÿ™‚

  53. teapunk says:

    Hey Martin! AWESOME control! Thanks so much. Learning how to use WPF and it is challenging. Have used FLASH before, so is coming along nicely, but struggling, and your tutorial really gave me hope! Don’t you want to do one on creating a Date Picker?! ๐Ÿ˜›

    Thanks again! ๐Ÿ™‚

  54. Christopher says:

    Hi Martin,

    Your guide to creating glass buttons was very easy and fun to follow.  Thank you for sharing ๐Ÿ™‚

  55. Phu says:

    Thank you very much for the tutorial.

  56. Tim says:

    Hi Martin,

     I’m not sure if I overlooked a step or something but how does one get the "content" property to appear in the properties window of visual studio? Thanks for the tutorial! I’m just beginning and that’s been a great help.

  57. Ragesh ABM Developers says:

    Hi Martin,

    Your guide to creating glass buttons was very easy

    Thanks……….

  58. martin.grayson says:

    Hi Tim,

    You just need to add a ContentPresenter control the the template of the button, then hey presto, job done!

    Martin

  59. Kaminari says:

    Can i use it in commercial app ?

  60. Love says:

       plzzzz give ,me some more information about to create  this application

  61. Paymaster says:

    Thanks for sharing. The button looks absolutely great!

  62. martin.grayson says:

    Hi Love,

    This is a walkthrough for creating a button style, its not a standalone application.

    If you follow the guide, you should be able to apply it to other buttons and controls in your own application.

    Hope that helps,

    Thanks,

    Martin

  63. Per Bernhardsson says:

    First of all, very nicely done, but people have said that to you about this blog for over 2.5 years now so I guess I’m a bit late. ๐Ÿ˜‰

    Anyway, I would suggest a few minor changes.

    1. Set the outer border alpha channel to 0x40 which will make it look more like the task bar which has a thinner border than your implementation.

    2. I added a default style which sets the template and the foreground color of all buttons so that I don’t have to do it manually everywhere.

  64. Michael says:

    Really great stuff you’ve got there. That button looks awesome.

    Though I would add the IsFocused trigger as well (for people using the TAB key)

    which is added like this:

    <Trigger Property="IsFocused" Value="True">

                       <Trigger.EnterActions>

                           <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>

                       </Trigger.EnterActions>

                       <Trigger.ExitActions>

                           <BeginStoryboard Storyboard="{StaticResource Timeline2}"/>

                       </Trigger.ExitActions>

                   </Trigger>

    Cheers!

  65. Iulian says:

    Hei how is going the design for Tab Container control? Do you think that you can release a new tutorial for the tabs?

    Thank you

  66. Plony says:

    Hi Martin,

    This is the most beautiful button I have seen!

    I am doing a project in wpf and i would like to base it on a glass

    look.

    if you have a form/window glass in c#, it would be a huge help

    Thanks again

    Plony

  67. Kai says:

    Is the stuff in Blacklight the same as this for Silverlight?  If not, is there a Silverlight version available?

  68. Nishant says:

    Thanks Martin !!

    Really a gud piece of work…

    your article is really helpful to understand right from the beginning.

    Thanks a Lot plz write few new articles

    Thanks a Lot !

  69. Great tutorial it is always great to learn new techniques.

    I will be back to see what else you have added

  70. Event after 3 years, this post is very useful!!!

    Thanks Martin.

  71. Tanner says:

    This is a great tutorial you have put together here. Thanks for sharing.

  72. dasha says:

    this has been my guide for a while, not if only we'd get a tutorial for  the scrollbar it would be much helpful!!

  73. Max says:

    Thank you for that great Tutorial!

    But a question: How can i now use this new control in VisualStudi for a WPF-project?

  74. Hyacinth Broadchest says:

    Thanks, worked great for my buttons.

  75. Thanks for such a gr88 afforts. says:

    Really helpful article….Thanks budy for posting…

    Regards,

    Gaurav Zambare, Pune.

  76. Ramkrish says:

    In Blend 4 i am unable to find Trigger Please help me out in this

  77. WPFAdmin says:

    Hi,

    here are the simple example code of creating the Glass button

    wpftutorial.co.in/…/WPFGlassButton.aspx

  78. king says:

    code….?proper code which use it and then work..

  79. JxDarkAngel says:

    Gracias por el aporte, de verdad muchas gracias.