Click here to Skip to main content
Click here to Skip to main content

Enhanced GlassButton using GDI+

, 13 Mar 2007 CPOL
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.

Comments and Discussions

 
QuestionException throwing PinmemberMember 945160123-Aug-14 6:57 
AnswerRe: Exception throwing PinmemberZhi Chen13-Oct-14 9:22 
GeneralRe: Exception throwing PinmemberZhi Chen13-Oct-14 9:42 
GeneralRe: Exception throwing Pinmemberwmjordan15-Oct-14 0:25 
GeneralGreat! PinmemberMember 108491207-Jul-14 19:52 
GeneralMy vote of 5 PinmvpKanasz Robert27-Sep-12 9:38 
GeneralMy vote of 5 PinmemberDon_Hard5-Jun-11 4:36 
GeneralWow PinmemberDavid55345-Oct-10 14:14 
GeneralWhere is the demo project PinmemberXmen W.K.3-Jul-10 1:32 
QuestionPerformance question PinmemberGreg Cadmes2-Oct-09 7:16 
AnswerRe: Performance question PinmemberFink Christoph3-Oct-09 8:37 
QuestionHow to add to tool bar PinmemberGary In SD19-Jul-08 11:21 
AnswerRe: How to add to tool bar PinmemberFink Christoph19-Jul-08 13:23 
GeneralRe: How to add to tool bar PinmemberGary In SD19-Jul-08 14:23 
GeneralRe: How to add to tool bar PinmemberFink Christoph19-Jul-08 22:53 
GeneralRe: How to add to tool bar PinmemberGary In SD20-Jul-08 4:03 
GeneralRe: How to add to tool bar PinmemberFink Christoph20-Jul-08 4:15 
GeneralRe: How to add to tool bar PinmemberGary In SD20-Jul-08 4:35 
GeneralGreat.... PinmemberChristy Rajan25-Feb-08 2:32 
GeneralRe: Great.... PinmemberFink Christoph27-Mar-08 15:30 
GeneralRe: Great.... Pinmemberign-up22-Sep-08 2:31 
GeneralRe: Great.... Pinmemberpao61625-Feb-09 20:55 
GeneralUse DrawSpecialSymbol method in My Project PinmemberSukhjinder_K8-Nov-07 18:28 
GeneralRe: Use DrawSpecialSymbol method in My Project PinmemberFink Christoph8-Nov-07 20:59 
GeneralThanks PinmemberSukhjinder_K9-Nov-07 3:51 

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