Click here to Skip to main content
11,641,971 members (59,934 online)
Click here to Skip to main content

Enhanced GlassButton using GDI+

, 13 Mar 2007 CPOL 150.3K 10.7K 191
Rate this:
Please Sign up or sign in to vote.
An improved GlassButton with different forms and symbols, using GDI+ (and not WPF).

Screenshot - EnhancedGlassButton.jpg

Introduction

This is my first article on CodeProject, so be patient with me if I've made some mistakes.

The control from this article is based on the GlassButton from Lukasz Swiatkowski. He created a very cool control, simply with GDI+, which looks similar to the Glass buttons from the Aero-GUI in WinVista. I've made some enhancements so that the control has some cool functions, and I also did some performance improvements, and have found a great trick to increase the performance dramatically if you are using the GlassButton on a Form with the background image set.

Background

My reason to create these improvements was that I'm currently working on my Diploma work where one part is a multimedia player where I want a cool design and so the GlassButton was the best candidate to be used for the player buttons, but my design needs some "specials" and so I improved the original GlassButton so it could do these "specials".

How to use the EnhancedGlassButton?

To use the control as given here, you simply need to download the given DLL and include it into your Visual Studio Toolbar; then use the button as you would a normal Button, with the Designer or within the code.

Short description of the enhancements and other properties of the GlassButton:

  • AlternativeFocusBorderColor:
    • If the alternative Focusborder is chosen, the outer border will be drawn in this color (looks very nice in my app).
  • AlternativeForm & -Direction:
    • The button will be drawn with the alternative form and direction as you see on the screenshot.
  • AnimateGlow:
    • If false, the glow isn't animated, and the performance is improved if you are using more than one GlassButton on your form.
  • CornerRadius:
    • Defines a user-defined corner radius. The maximum radius is calculated as Width/Height / 2, and if selected, the button will be round.
  • GlowColor:
    • The color of the glow which appears on the control when it is hovered.
  • ShineColor
    • The color of the shine on the upper half of the control which simulates the 3D effect.
  • ShowFocusBorder:
    • If true -> normal behavior.
    • If false -> normal focus border is not drawn and the alternative focus border will be drawn (necessary for alternative form or round buttons).
  • ShowSpecialSymbol, SpecialSymbol, SpecialSymbolColor:
    • Draws a special symbol with the selected color on the control (Arrows, Play, Pause,... some symbols need to be improved if the button size is big - will be done in the next release [if you have a better symbol, mail me!]), as you see on the screenshot.
  • ToolTipText:
    • If not empty, a ToolTip will be created automatically on the control.

Improvements if you are using the button with background images

If you have a Form with a BackgroundImage and some GlassButtons, you will notice that the performance goes down rapidly. This is because of the rendering of the transparency of the image at every redraw.

To improve this, you could pre-render the background image to the correct size and with a transparency-channel, as show in the following code:

//Global Vareable

Image backgroundImage; 

//In the Load- and Resize-Function

SuspendLayout();

if (this.BackgroundImage != null && this.Height > 0 && this.Width > 0) 
{
    if (this.backgroundImage == null)
        this.backgroundImage = this.BackgroundImage;

    Bitmap renderBmp = new Bitmap(this.Width, this .Height,
        System.Drawing.Imaging.PixelFormat.Format32bppPArgb);

    Graphics g = Graphics.FromImage(renderBmp);
    g.DrawImage(this.backgroundImage, 0, 0, this.Width, this.Height);
    this.BackgroundImage = renderBmp;
    g.Dispose();
}

ResumeLayout();

If you put the code above into your Load and Resize functions, the BackgroundImage will be pre-rendered and the drawing will be up to ten times faster (don't forget to make the background image variable global)!

How to create the special designs

To create the designs, I use simple GraphicPaths and draw the button with them, as seen in the following code:

if (alternativeForm)
{
    if (alternativeFormDirection == Direction.Left)
    {
        path.AddArc(l, t, h, h, 90, 180);
        path.AddLine(l + h, t, l + w, t);
        path.AddCurve(new Point[5] { 
            new Point(l + w, t), 
            new Point(l + w - h / 6, t + h / 4),
            new Point((int)(l + w - (double)(h / 4.7)), t + h / 2),
            new Point(l + w - h / 6, t + 3 * h / 4), 
            new Point(l + w, t + h) });
            path.AddLine(l + h, t + h, l + w, t + h);
    }
    else
    {
        //same in the other direction

    }
}

Using the same method, I've created the symbols on the button.

Use ore edit the code

You can feel free to use this class / code in any application or extend it a second time, but if you make extensions, please keep the comment-header in the GlassButton.cs as it is and only extend it with your name.

If you make some cool extensions, mail me, maybe I could use them too Wink | ;) .

Points of interest

What I noticed when I was creating the new design was that I was able to smooth out drawings on the control with anti-aliasing, but if you try to cut unused space from your control with the region, you will get "nice stairs"...

History

  • V1.0 (13.03.2007) - Main release.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Fink Christoph
Software Developer
Austria Austria
I was a student for electronics and technical information technologies at the higher technical school in Rankweil, Austria.

Since Summer 2007 I'm working as a .net SW-Developer.

I'm a .net developer since 2003 and also able to programm C/C++, PHP, ASM ans some more.

You may also be interested in...

Comments and Discussions

 
QuestionException throwing Pin
Member 945160123-Aug-14 5:57
memberMember 945160123-Aug-14 5:57 
AnswerRe: Exception throwing Pin
Zhi Chen13-Oct-14 8:22
memberZhi Chen13-Oct-14 8:22 
GeneralRe: Exception throwing Pin
Zhi Chen13-Oct-14 8:42
memberZhi Chen13-Oct-14 8:42 
GeneralRe: Exception throwing Pin
wmjordan14-Oct-14 23:25
memberwmjordan14-Oct-14 23:25 
GeneralGreat! Pin
Member 108491207-Jul-14 18:52
memberMember 108491207-Jul-14 18:52 
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 8:38
mvpKanasz Robert27-Sep-12 8:38 
GeneralMy vote of 5 Pin
Don_Hard5-Jun-11 3:36
memberDon_Hard5-Jun-11 3:36 
GeneralWow Pin
David55345-Oct-10 13:14
memberDavid55345-Oct-10 13:14 
GeneralWhere is the demo project Pin
Xmen W.K.3-Jul-10 0:32
memberXmen W.K.3-Jul-10 0:32 
QuestionPerformance question Pin
Greg Cadmes2-Oct-09 6:16
memberGreg Cadmes2-Oct-09 6:16 
AnswerRe: Performance question Pin
Fink Christoph3-Oct-09 7:37
memberFink Christoph3-Oct-09 7:37 
QuestionHow to add to tool bar Pin
Gary In SD19-Jul-08 10:21
memberGary In SD19-Jul-08 10:21 
AnswerRe: How to add to tool bar Pin
Fink Christoph19-Jul-08 12:23
memberFink Christoph19-Jul-08 12:23 
GeneralRe: How to add to tool bar Pin
Gary In SD19-Jul-08 13:23
memberGary In SD19-Jul-08 13:23 
GeneralRe: How to add to tool bar Pin
Fink Christoph19-Jul-08 21:53
memberFink Christoph19-Jul-08 21:53 
GeneralRe: How to add to tool bar Pin
Gary In SD20-Jul-08 3:03
memberGary In SD20-Jul-08 3:03 
GeneralRe: How to add to tool bar Pin
Fink Christoph20-Jul-08 3:15
memberFink Christoph20-Jul-08 3:15 
GeneralRe: How to add to tool bar Pin
Gary In SD20-Jul-08 3:35
memberGary In SD20-Jul-08 3:35 
GeneralGreat.... Pin
Christy Rajan25-Feb-08 1:32
memberChristy Rajan25-Feb-08 1:32 
GeneralRe: Great.... Pin
Fink Christoph27-Mar-08 14:30
memberFink Christoph27-Mar-08 14:30 
GeneralRe: Great.... Pin
ign-up22-Sep-08 1:31
memberign-up22-Sep-08 1:31 
GeneralRe: Great.... Pin
pao61625-Feb-09 19:55
memberpao61625-Feb-09 19:55 
GeneralUse DrawSpecialSymbol method in My Project Pin
Sukhjinder_K8-Nov-07 17:28
memberSukhjinder_K8-Nov-07 17:28 
GeneralRe: Use DrawSpecialSymbol method in My Project Pin
Fink Christoph8-Nov-07 19:59
memberFink Christoph8-Nov-07 19:59 
GeneralThanks Pin
Sukhjinder_K9-Nov-07 2:51
memberSukhjinder_K9-Nov-07 2:51 
GeneralRe: Thanks Pin
Fink Christoph9-Nov-07 2:53
memberFink Christoph9-Nov-07 2:53 
GeneralExcellent Work Pin
Daniel_Hochee13-Sep-07 20:28
memberDaniel_Hochee13-Sep-07 20:28 
GeneralRe: Excellent Work Pin
Fink Christoph13-Sep-07 20:31
memberFink Christoph13-Sep-07 20:31 
Generaltwo questions [modified] Pin
rhennecke28-Aug-07 20:56
memberrhennecke28-Aug-07 20:56 
GeneralSame Effect as Mouse Hover on Keyboard Focus Pin
Sukhjinder_K23-Jul-07 20:44
memberSukhjinder_K23-Jul-07 20:44 
GeneralRe: Same Effect as Mouse Hover on Keyboard Focus Pin
Fink Christoph24-Jul-07 6:05
memberFink Christoph24-Jul-07 6:05 
GeneralRe: Same Effect as Mouse Hover on Keyboard Focus Pin
Sukhjinder_K24-Jul-07 8:32
memberSukhjinder_K24-Jul-07 8:32 
GeneralRe: Same Effect as Mouse Hover on Keyboard Focus Pin
Fink Christoph24-Jul-07 9:41
memberFink Christoph24-Jul-07 9:41 
GeneralRe: Same Effect as Mouse Hover on Keyboard Focus Pin
Sukhjinder_K24-Jul-07 20:31
memberSukhjinder_K24-Jul-07 20:31 
GeneralHa Ha Ha Pin
Sukhjinder_K19-Jul-07 7:20
memberSukhjinder_K19-Jul-07 7:20 
GeneralSuper cool control. Pin
Sameer Vartak11-May-07 5:48
memberSameer Vartak11-May-07 5:48 
GeneralRe: Super cool control. Pin
Fink Christoph11-May-07 5:52
memberFink Christoph11-May-07 5:52 
GeneralAnti-aliasing Pin
10esun24-Mar-07 3:39
member10esun24-Mar-07 3:39 
GeneralRe: Anti-aliasing Pin
Fink Christoph24-Mar-07 4:41
memberFink Christoph24-Mar-07 4:41 
GeneralJust when I think it can't get any better.. Pin
Patrick Sears13-Mar-07 6:43
memberPatrick Sears13-Mar-07 6:43 
GeneralRe: Just when I think it can't get any better.. Pin
Fink Christoph13-Mar-07 6:45
memberFink Christoph13-Mar-07 6:45 
GeneralRe: Just when I think it can't get any better.. Pin
Tim Musschoot14-Mar-07 0:15
memberTim Musschoot14-Mar-07 0:15 

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
Web01 | 2.8.150731.1 | Last Updated 13 Mar 2007
Article Copyright 2007 by Fink Christoph
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid