Click here to Skip to main content
15,920,956 members
Articles / Programming Languages / XML

Creating a Glass Button using GDI+

Rate me:
Please Sign up or sign in to vote.
4.86/5 (217 votes)
26 Mar 2013CPL2 min read 946.2K   21.1K   611   233
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:

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

C#
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
    • Split 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)


Written By
Software Developer
Poland Poland
I am a graduate of Wroclaw University of Science and Technology, Poland.

My interests: gardening, reading, programming, drawing, Japan, Spain.

Comments and Discussions

 
GeneralRe: Paint event Pin
Lukasz Sw.17-Apr-07 6:48
Lukasz Sw.17-Apr-07 6:48 
GeneralRe: Paint event Pin
Mikael Bager17-Apr-07 19:50
Mikael Bager17-Apr-07 19:50 
GeneralRe: Paint event Pin
Lukasz Sw.18-Apr-07 2:49
Lukasz Sw.18-Apr-07 2:49 
GeneralI like it :-) Pin
Mc Gwyn3-Apr-07 7:07
Mc Gwyn3-Apr-07 7:07 
GeneralRe: I like it :-) Pin
Lukasz Sw.3-Apr-07 12:06
Lukasz Sw.3-Apr-07 12:06 
GeneralRe: I like it :-) Pin
Mc Gwyn4-Apr-07 20:44
Mc Gwyn4-Apr-07 20:44 
GeneralRe: Im a bit dubious about this [modified] Pin
Sacha Barber28-Mar-07 23:55
Sacha Barber28-Mar-07 23:55 
GeneralRe: Im a bit dubious about this Pin
Marcos Meli29-Mar-07 4:22
Marcos Meli29-Mar-07 4:22 
I agree with you at some points, and I love to discuss too =) :P

The problem is that in this site there are a lot of people searching for ready to use stuff with two clicks, and is a good thing too.

I think that your perfect artice "100% Reflective Class Diagram Creation Tool" is more useful for advance developers and some others with medium skills and you sure do more work than lukas on it. But like I said the most of the people some times overlook some gems and some time look at shine things as better =)

Was very nice to talk sinceriusly with you.

Sorry for my english
Cheers Sacha and Keep in the good work

Marcos



GeneralRe: Im a bit dubious about this Pin
Sacha Barber29-Mar-07 22:05
Sacha Barber29-Mar-07 22:05 
GeneralGreat control!! Pin
CSharpian28-Mar-07 20:27
CSharpian28-Mar-07 20:27 
GeneralRe: Great control!! Pin
Lukasz Sw.31-Mar-07 5:43
Lukasz Sw.31-Mar-07 5:43 
GeneralGreat control! Pin
Star Vega28-Mar-07 11:20
Star Vega28-Mar-07 11:20 
GeneralRe: Great control! Pin
Lukasz Sw.31-Mar-07 5:44
Lukasz Sw.31-Mar-07 5:44 
Questionglass buttons Pin
mileswaldron27-Mar-07 11:04
mileswaldron27-Mar-07 11:04 
AnswerRe: glass buttons Pin
Lukasz Sw.27-Mar-07 11:16
Lukasz Sw.27-Mar-07 11:16 
AnswerRe: glass buttons Pin
Lukasz Sw.31-Mar-07 8:08
Lukasz Sw.31-Mar-07 8:08 
GeneralJust to say that's a cool contribution ! Thanks. Pin
2pers26-Mar-07 22:57
2pers26-Mar-07 22:57 
GeneralRe: Just to say that's a cool contribution ! Thanks. Pin
Lukasz Sw.26-Mar-07 23:22
Lukasz Sw.26-Mar-07 23:22 
GeneralThemed buttons Pin
Peter Wone26-Mar-07 14:16
Peter Wone26-Mar-07 14:16 
GeneralRe: Themed buttons Pin
Lukasz Sw.27-Mar-07 11:19
Lukasz Sw.27-Mar-07 11:19 
GeneralRe: Themed buttons Pin
Peter Wone29-Mar-07 0:14
Peter Wone29-Mar-07 0:14 
GeneralRe: Themed buttons Pin
Sacha Barber29-Mar-07 3:59
Sacha Barber29-Mar-07 3:59 
GeneralRe: Themed buttons Pin
Lukasz Sw.31-Mar-07 9:37
Lukasz Sw.31-Mar-07 9:37 
GeneralRe: Themed buttons [modified] Pin
Peter Wone1-Apr-07 13:12
Peter Wone1-Apr-07 13:12 
GeneralRe: Themed buttons Pin
Barbeque Source1-Apr-07 20:28
Barbeque Source1-Apr-07 20:28 

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

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