Creating a Glass Button – PART ONE


Alot of people ask, when it comes to WPF, how do I make my app look cool?

WPF allows to fully customise the look and behaviour of all the common controls – this means a button no longer needs to be represented by a grey rectangle, or a radio button no longer needs to be represented by a round bullet.

All controls in WPF are lookless.

The image below shows the final output of what we will produce…

So, I have attached the tutorial and source code to this post… go fourth and build. Drop any comments if you have any problems and i will get back you with answers.


Comments (24)

  1. BlakeHandler says:

    fiddly? (^_^)  

    Thanks for the great step-by-step tutorial — I appreciate the incredible detail!

  2. martin.grayson says:

    Thats no problem. Sometimes its hard working out how much detail to put in.

    As for ‘fiddly’… firstly, apologies for those who are new to my wierd, but wonderful language 🙂 I guess it could be defined as ‘tricky’, because you are working in such a small space.

    Anywho, enjoy!

  3. DracoWiz says:

    Is their a method to use an animated cursor as a icon on the glass button — if so, How can we do that?

    sign me bored with the routine (even the future routine) 😉

  4. martin.grayson says:

    Yeah, definately. The place where i put the image could actually have anything in it – an image, a video, more text, an animated 3D scene…

    All you would need to do is create a timeline in the button template, and create you animation from there. I will be showing timeline creation in Part 2 later this week, so watch this space.

  5. Software Test Engineer, Dante Gagne, takes us through a tutorial of how to bind media to playback…

  6. Joe Sanders says:

    "Part 2 later this week"…  that was nearly a month ago… really looking forward to Part two though… any eta?

  7. Rocks says:

    The tutorial rocks man!  As a programmer with not that great design skills I was still able to walkthrough your tutorial and create a cool looking button in no time.  I love the little screenshots next to each step which helped out alot!  I look forward to the upcoming tutorials for other effects!

  8. billys says:

    Hello! I am Billy Johnson Nice design. Enjoy! Good site! OK. 0n79p7k .

  9. Justin says:

    I can get the code to work, but when I try to put it into a seperate resource file it doesn’t seem to work.  Any thoughts?

  10. Kevin says:

    Hi all , very nice site! Thank You !

  11. Well, it was a while back that I posted the first Creating a Glass button tutorial. Of course, that was

  12. Varun says:

    Nice Work, its very helpful for great design. Keep it up

  13. All about niagara fall <a href=" ">niagara university</a>niagara university

  14. All about niagara falls <a href=" ">seneca niagara</a>seneca niagara

  15. All about niagara falls <a href=" ">first niagara</a>first niagara

  16. All about ford cars and parts <a href=" ">ford new rochester york</a>ford new rochester york

  17. All about ford cars and parts <a href=" ">bergen ford</a>bergen ford

  18. All about ford cars and parts <a href=" ">cincinnati ford</a>cincinnati ford

  19. All about ford cars and parts <a href=" ">ford greensboro</a>ford greensboro

  20. All about ford cars and parts <a href=" ">free criminal check</a>free criminal check

  21. Rajan says:

    The sequence is so easy, and very helpful for designs


  22. Amal says:

    Hai, Great Idea I will Love to contact with you .Mail Me At

  23. Computer Repair says:

    Great post, really helped me understand how this all works, thank you! I will come back again.

  24. John Petrick says:

    This is a great tutorial, Martin.  It really helped explain some of the strange little nuances of Blend.  Thanks very much for positing it!