Click here to Skip to main content
11,574,494 members (69,800 online)
Click here to Skip to main content

Creating a Glass Button using GDI+

, 26 Mar 2013 CPL 682.5K 16.2K 603
Rate this:
Please Sign up or sign in to vote.
How to create an animating glass button using only GDI+ (and not using WPF)

Screenshots

Sample application using a standard glass button with image.

Sample application using a standard glass button with image.

The same application, but this time it has a customized glass button.

Sample application using a customized glass button.

MFC application which hosts four glass buttons.

MFC application which hosts four glass buttons.

Introduction

I bet you have already seen animated task buttons in Windows Vista. I have. I was wondering how to create a similar control. Fortunately, I found a web page which describes how to do that using the Microsoft Expression Blend (Creating a Glass Button: The Complete Tutorial). The glass button (and thus the whole application) created with the Microsoft Expression Blend requires .NET Framework 3.0 to run. Because some people cannot or do not want to use .NET Framework 3.0 yet, I have decided to rewrite that cool control using only GDI+ so it would work with .NET Framework 2.0.

"Converting" XAML to C# (GDI+)

The tutorial from the page mentioned above was easy to complete, and the generated XAML code was so understandable that there were no big issues with a "conversion."

For example, I have translated the following code:

<Border HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" x:Name="shine" 
        Width="Auto" CornerRadius="4,4,0,0">

  <Border.Background>
    <LinearGradientBrush EndPoint="0.494,0.889" 
                         StartPoint="0.494,0.028">
      <GradientStop Color="#99FFFFFF" Offset="0" />

      <GradientStop Color="#33FFFFFF" Offset="1" />
    </LinearGradientBrush>
  </Border.Background>

</Border>

into:

using (GraphicsPath bh = CreateTopRoundRectangle(rect2, 4))
{
  int opacity = 0x99;
  if (isPressed) opacity = (int)(.4f * opacity + .5f);
  using (Brush br = new LinearGradientBrush(rect2, 
                          Color.FromArgb(opacity, shineColor),
                          Color.FromArgb(opacity / 3, shineColor),
                          LinearGradientMode.Vertical))
  {
    g.FillPath(br, bh);
  }
}

(This is only a fragment of the DrawButtonBackground method.)

Even the animation of a hovered button was easily obtained by using the Timer class. Unfortunately, an animation is not quite smooth when a glass button is quite big.

How to use the GlassButton class?

The GlassButton class derives from the Button class so it can be used in the same way. Displaying an image on a glass button is also supported now. Even the guidelines work fine in the Visual Studio's form designer.

History

  • 1.3.2 (02.11.2008) — Important! This is the last “standalone” version of the control. The next version will be included in a new project hosted at CodePlex.
    • Fixed a bug that caused the button's image to be disposed in certain situations.
  • 1.3.1 (27.10.2008)
    • The source code is now available both in C# and VB.NET.
    • Minor bugs fixed.
  • 1.3 (19.11.2007)
    • The image is grayed when the button is disabled.
    • Added property 'FadeOnFocus'.
    • Improved performance.
    • Minor bugs fixed.
  • 1.2 (31.03.2007)
    • The 'disabled' look differs from the 'enabled' one.
    • Added some 'PropertyChange' events.
    • Improved performance.
    • Splitted source code from compiled library and demo application.
    • Added MFC demo application.
    • Added toolbox bitmap.
    • Minor bugs fixed.
  • 1.1.1 (22.02.2007)
    • Minor bugs fixed.
  • 1.1 (21.02.2007)
    • Added images support.
  • 1.0 (19.02.2007)
    • First version.

License

This article, along with any associated source code and files, is licensed under The Common Public License Version 1.0 (CPL)

Share

About the Author

Lukasz Swiatkowski
Software Developer
Poland Poland
I am a graduate of Wroclaw University of Technology, Poland.

My interests: reading, programming, drawing, Japan, yoga, tai-chi.

My websites: luminous.codeplex.com, www.lukesw.net

You may also be interested in...

Comments and Discussions

 
QuestionHow to import in my project? Pin
Member 1099147112-Jan-15 5:23
memberMember 1099147112-Jan-15 5:23 
AnswerRe: How to import in my project? Pin
Lukasz Swiatkowski13-Jan-15 21:18
memberLukasz Swiatkowski13-Jan-15 21:18 
SuggestionHave 5 from me Pin
MarkBoreham7-Jan-14 21:58
memberMarkBoreham7-Jan-14 21:58 
QuestionC++ / MFC Pin
Andy Bantly17-Apr-13 5:27
memberAndy Bantly17-Apr-13 5:27 
After seeing this, and having done many custom button classes in MFC/C++, it makes me want to do this for the C++ MFC crowd. All of those drawing options are available in the regular GDI.
AnswerRe: C++ / MFC Pin
Chris Mayyer22-May-13 23:34
memberChris Mayyer22-May-13 23:34 
GeneralRe: C++ / MFC Pin
Andy Bantly23-May-13 1:31
memberAndy Bantly23-May-13 1:31 
Buggood conversion from xaml to c# Pin
sridhar.codeproject27-Mar-13 0:04
membersridhar.codeproject27-Mar-13 0:04 
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 8:36
mvpKanasz Robert27-Sep-12 8:36 
QuestionGreat tool but unreadable code Pin
raminxtar17-Sep-12 1:46
memberraminxtar17-Sep-12 1:46 
AnswerRe: Great tool but unreadable code Pin
Lukasz Swiatkowski17-Sep-12 1:49
memberLukasz Swiatkowski17-Sep-12 1:49 
QuestionA great article Pin
Michael Haephrati1-Jul-12 7:15
memberMichael Haephrati1-Jul-12 7:15 
GeneralMy vote of 5 Pin
Kraeven1-May-12 23:58
memberKraeven1-May-12 23:58 
QuestionSometimes I get a red cross (red X) Pin
BjornLamers13-Mar-12 0:11
memberBjornLamers13-Mar-12 0:11 
Questionniiiiiiiiiiiiice Pin
Des1re27-Feb-12 8:58
memberDes1re27-Feb-12 8:58 
Generalvery goooooooooooooood ! Pin
kingtak25-Feb-12 22:47
memberkingtak25-Feb-12 22:47 
Questionhow did you change form colour to black Pin
samit198425-Nov-11 0:06
membersamit198425-Nov-11 0:06 
AnswerRe: how did you change form colour to black Pin
Lukasz Swiatkowski25-Nov-11 0:42
memberLukasz Swiatkowski25-Nov-11 0:42 
QuestionHow to set image in MFC using resource Icons? Pin
Chandrak Baxi10-Apr-11 20:19
memberChandrak Baxi10-Apr-11 20:19 
AnswerRe: How to set image in MFC using resource Icons? Pin
Lukasz Swiatkowski10-Apr-11 21:09
memberLukasz Swiatkowski10-Apr-11 21:09 
GeneralMy vote of 5 Pin
drummerboy051124-Mar-11 9:39
memberdrummerboy051124-Mar-11 9:39 
GeneralMy vote of 5 Pin
csrss21-Dec-10 9:02
membercsrss21-Dec-10 9:02 
GeneralBrilliant :) Pin
Ant21003-Sep-10 11:21
memberAnt21003-Sep-10 11:21 
GeneralMy vote of 5 Pin
lastrebel2-Sep-10 13:24
memberlastrebel2-Sep-10 13:24 
GeneralThank You Pin
Tim Grindley2-Mar-10 1:27
memberTim Grindley2-Mar-10 1:27 
GeneralRounded Corners Pin
edurveda18-Nov-09 9:18
memberedurveda18-Nov-09 9:18 
Generalback color transparency Pin
Member 39534807-Jul-09 23:46
memberMember 39534807-Jul-09 23:46 
GeneralRe: back color transparency Pin
Lukasz Swiatkowski8-Jul-09 3:16
memberLukasz Swiatkowski8-Jul-09 3:16 
JokeThank you Pin
Mr_Coder18-Mar-09 18:50
memberMr_Coder18-Mar-09 18:50 
Generalits some how good Pin
zanzona11-Jan-09 23:07
memberzanzona11-Jan-09 23:07 
GeneralUsing a GlassButton as the appearance for a RadioButton Pin
Meestor_X28-Nov-08 10:59
memberMeestor_X28-Nov-08 10:59 
GeneralRe: Using a GlassButton as the appearance for a RadioButton Pin
Lukasz Swiatkowski12-Jan-09 11:49
memberLukasz Swiatkowski12-Jan-09 11:49 
QuestionRe: Using a GlassButton as the appearance for a RadioButton Pin
himoobd14-May-09 1:39
memberhimoobd14-May-09 1:39 
QuestionImage Animation Pin
Danish Sultan9-Nov-08 20:46
memberDanish Sultan9-Nov-08 20:46 
AnswerRe: Image Animation Pin
Lukasz Swiatkowski12-Jan-09 11:13
memberLukasz Swiatkowski12-Jan-09 11:13 
General[Message Removed] Pin
Katekortez25-Oct-08 8:56
memberKatekortez25-Oct-08 8:56 
GeneralVB Version Pin
raing325-Jun-08 13:42
memberraing325-Jun-08 13:42 
GeneralRe: VB Version Pin
Lukasz Swiatkowski25-Jun-08 23:47
mvpLukasz Swiatkowski25-Jun-08 23:47 
GeneralAwesome Button! Pin
Engr4867-Jun-08 8:22
memberEngr4867-Jun-08 8:22 
GeneralRe: Awesome Button! Pin
Lukasz Swiatkowski25-Jun-08 23:37
mvpLukasz Swiatkowski25-Jun-08 23:37 
QuestionLicence Pin
Julian-w17-May-08 3:03
memberJulian-w17-May-08 3:03 
AnswerRe: Licence Pin
Lukasz Swiatkowski17-May-08 6:10
mvpLukasz Swiatkowski17-May-08 6:10 
GeneralRe: Licence Pin
Julian-w17-May-08 7:18
memberJulian-w17-May-08 7:18 
GeneralRe: Licence Pin
Julian-w18-May-08 2:50
memberJulian-w18-May-08 2:50 
GeneralRe: Licence Pin
Lukasz Swiatkowski18-May-08 2:59
mvpLukasz Swiatkowski18-May-08 2:59 
GeneralDrawToBitmap Pin
Jacob Shepherd20-Apr-08 20:41
memberJacob Shepherd20-Apr-08 20:41 
GeneralRe: DrawToBitmap Pin
Lukasz Swiatkowski21-Apr-08 5:33
mvpLukasz Swiatkowski21-Apr-08 5:33 
GeneralRe: DrawToBitmap Pin
Jacob Shepherd28-Apr-08 14:11
memberJacob Shepherd28-Apr-08 14:11 
GeneralRe: DrawToBitmap Pin
Lukasz Swiatkowski29-Apr-08 7:42
mvpLukasz Swiatkowski29-Apr-08 7:42 
QuestionUse in unmanaged App Pin
neoger30-Mar-08 9:38
memberneoger30-Mar-08 9:38 
GeneralRe: Use in unmanaged App Pin
Lukasz Swiatkowski31-Mar-08 7:42
mvpLukasz Swiatkowski31-Mar-08 7:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 27 Mar 2013
Article Copyright 2007 by Lukasz Swiatkowski
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid