Creating a Glass Button: The Complete Tutorial

re: Creating a Glass Button: The Complete Tutorial

Mark Haliday — Fri, 16 Feb 2007 20:32:42 GMT

This is really good! Thanks a bunch.

Creating a Glass Button

DotNetKicks.com — Sat, 17 Feb 2007 14:44:07 GMT

You've been kicked (a good thing) - Trackback from DotNetKicks.com

re: Creating a Glass Button: The Complete Tutorial

Creating a Glass Button — Wed, 28 Feb 2007 04:30:53 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Wed, 28 Feb 2007 13:29:25 GMT

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

re: Creating a Glass Button: The Complete Tutorial

flipmokid — Mon, 12 Mar 2007 12:21:16 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Mon, 12 Mar 2007 13:03:57 GMT

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!

WPF/E Server Controls

Bryant Likes's Blog — Tue, 13 Mar 2007 11:02:51 GMT

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

re: Creating a Glass Button: The Complete Tutorial

flipmokid — Tue, 13 Mar 2007 14:04:09 GMT

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.

Samples and Tutorials Gallery - Expression Blend

Microsoft Expression — Tue, 20 Mar 2007 00:42:21 GMT

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

Server Generated WPF/E Controls

Mike Harsh's Blog — Tue, 27 Mar 2007 18:23:54 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Robb Allen — Tue, 03 Apr 2007 22:25:21 GMT

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.

WPF Glass Button

Joe's Blog — Thu, 05 Apr 2007 04:59:10 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Neal Hudson — Wed, 11 Apr 2007 18:19:45 GMT

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?

re: Creating a Glass Button: The Complete Tutorial

Chris — Wed, 11 Apr 2007 18:53:48 GMT

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

Chris

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Wed, 11 Apr 2007 19:03:30 GMT

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

Silverlight Buttons and Pushbutton Discussion

WynApse — Wed, 18 Apr 2007 07:34:21 GMT

Silverlight Buttons and Pushbutton Discussion

re: Creating a Glass Button: The Complete Tutorial

Anders — Mon, 30 Apr 2007 11:18:22 GMT

Great tutorial! Thanks a lot!!!

re: Creating a Glass Button: The Complete Tutorial

Sven — Tue, 08 May 2007 19:18:12 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Karl — Sun, 27 May 2007 15:39:14 GMT

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 :

and change to :

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

re: Creating a Glass Button: The Complete Tutorial

Jeremy Chaney — Thu, 31 May 2007 20:19:56 GMT

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

Silverlight Examples

Michael's Blog — Tue, 05 Jun 2007 10:17:30 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Lee — Thu, 21 Jun 2007 06:09:36 GMT

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

Thanks!

re: Creating a Glass Button: The Complete Tutorial

Lee — Thu, 21 Jun 2007 16:41:15 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

icedre — Sat, 23 Jun 2007 20:59:22 GMT

Very cool !?!

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

THX

re: Creating a Glass Button: The Complete Tutorial

Marie — Fri, 06 Jul 2007 00:59:02 GMT

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.

【转】分享数十个silverlight示例和blog

Bryan Chow — Thu, 19 Jul 2007 15:34:44 GMT

分享几个国外的silverlight例子和blog GreatVisualStudioQuickStarts

re: Creating a Glass Button: The Complete Tutorial

Jack — Mon, 06 Aug 2007 13:58:05 GMT

Reallt good tutoriafor website design - cheers.

re: Creating a Glass Button: The Complete Tutorial

David — Mon, 13 Aug 2007 22:32:36 GMT

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!

re: Creating a Glass Button: The Complete Tutorial

sofiene — Mon, 20 Aug 2007 22:42:54 GMT

it's exciting Working with aero Glass

re: Creating a Glass Button: The Complete Tutorial

Daria — Thu, 23 Aug 2007 18:18:43 GMT

Thank you very much for your tutorial!!!

re: Creating a Glass Button: The Complete Tutorial

Godwin — Mon, 27 Aug 2007 06:38:36 GMT

Thanks for the tutorial mate! Great work...

re: Creating a Glass Button: The Complete Tutorial

loch — Wed, 19 Sep 2007 23:36:42 GMT

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

re: Creating a Glass Button: The Complete Tutorial

loch — Wed, 19 Sep 2007 23:44:56 GMT

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

re: Creating a Glass Button: The Complete Tutorial

markovich — Sat, 06 Oct 2007 19:55:52 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

Srinivas — Wed, 17 Oct 2007 16:08:27 GMT

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

How to give link while but click...

re: Creating a Glass Button: The Complete Tutorial

nazzinha — Wed, 31 Oct 2007 20:11:12 GMT

Hi,

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

Obrigada!!! Thank you!!!

re: Creating a Glass Button: The Complete Tutorial

KP — Mon, 24 Dec 2007 15:42:03 GMT

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,

re: Creating a Glass Button: The Complete Tutorial

Karthik — Thu, 10 Jan 2008 10:36:54 GMT

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 ?

re: Creating a Glass Button: The Complete Tutorial

Saragani — Sat, 19 Jan 2008 20:28:46 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

Tom — Tue, 05 Feb 2008 18:30:59 GMT

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

Maak een Vista glass-button met Expression Blend

Microsoft User Experience Blog — Wed, 06 Feb 2008 19:44:50 GMT

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

re: Creating a Glass Button: The Complete Tutorial

S.Christy Rajan — Sun, 24 Feb 2008 17:44:03 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

suresh — Sat, 08 Mar 2008 06:41:43 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Suresh — Sat, 08 Mar 2008 06:42:38 GMT

Sry Martin. I mispelled your name.

Work from home no fees.

Work from home. — Thu, 22 May 2008 15:15:34 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Wael A.Salem — Sat, 24 May 2008 00:08:11 GMT

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.

Ultram er 100 mg.

Ultram er. — Wed, 11 Jun 2008 02:58:26 GMT

Ultram er. Ultram er drugs. Ultram-er.

re: Creating a Glass Button: The Complete Tutorial

Garrison Neely — Mon, 01 Sep 2008 15:48:09 GMT

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!

Glass Buttons mit ExpressionBlend

prog1 Blog — Mon, 01 Sep 2008 21:07:22 GMT

<p>Windows Vista macht optisch einiges her. Klar dass man sich fragt, wie die eigene Anwendung sich ein Stück davon abschneiden kann. Schön anzuschauen sind auf jeden Fall die Glass Bu ...

re: Creating a Glass Button: The Complete Tutorial

Emil — Fri, 05 Sep 2008 06:45:34 GMT

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

re: Creating a Glass Button: The Complete Tutorial

glass tutorials — Tue, 09 Sep 2008 01:28:29 GMT

Hello Martin!

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

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Thu, 18 Sep 2008 00:12:20 GMT

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

re: Creating a Glass Button: The Complete Tutorial

teapunk — Tue, 14 Oct 2008 20:01:51 GMT

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?! :-P

Thanks again! :-)

re: Creating a Glass Button: The Complete Tutorial

Christopher — Wed, 03 Dec 2008 02:17:34 GMT

Hi Martin,

Your guide to creating glass buttons was very easy and fun to follow. Thank you for sharing :)

re: Creating a Glass Button: The Complete Tutorial

Phu — Sun, 08 Mar 2009 10:23:35 GMT

Thank you very much for the tutorial.

re: Creating a Glass Button: The Complete Tutorial

Tim — Mon, 09 Mar 2009 06:38:39 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

Ragesh ABM Developers — Fri, 17 Apr 2009 15:43:15 GMT

Hi Martin,

Your guide to creating glass buttons was very easy

Thanks..........

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Tue, 21 Apr 2009 11:09:25 GMT

Hi Tim,

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

Martin

re: Creating a Glass Button: The Complete Tutorial

Kaminari — Mon, 27 Apr 2009 19:19:21 GMT

Can i use it in commercial app ?

re: Creating a Glass Button: The Complete Tutorial

Love — Thu, 23 Jul 2009 16:25:52 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Paymaster — Wed, 12 Aug 2009 13:36:00 GMT

Thanks for sharing. The button looks absolutely great!

re: Creating a Glass Button: The Complete Tutorial

Martin Grayson — Fri, 14 Aug 2009 11:38:32 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Per Bernhardsson — Thu, 17 Sep 2009 11:08:10 GMT

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.

re: Creating a Glass Button: The Complete Tutorial

Michael — Wed, 30 Sep 2009 18:16:44 GMT

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.EnterActions>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Trigger.ExitActions>

</Trigger>

Cheers!

re: Creating a Glass Button: The Complete Tutorial

Iulian — Fri, 16 Oct 2009 15:43:59 GMT

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

re: Creating a Glass Button: The Complete Tutorial

Plony — Wed, 25 Nov 2009 16:02:10 GMT

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