Click here to Skip to main content
16,016,180 members
Articles / Multimedia / GDI+

GlowButton - A Glowing Button Control

Rate me:
Please Sign up or sign in to vote.
4.70/5 (24 votes)
28 Mar 2010CPOL1 min read 70.4K   4.2K   92   13
A simple media control button
screen.png

Just a Quickie...

Recently I came across the KMP Player software, and was looking over some of the graphic elements (and if you want to see some really good graphics work, I recommend you check it out). One of the elements that I need for a project was a simple glowing button control, used for the player controls, nothing too fancy, just an image that changes color and glows when hovered.

Getting an image to change color is rather trivial, it is done by modifying the color matrices of an ImageAttribute:

C#
private void DrawColoredImage(Graphics g, Image img, Rectangle bounds, Color clr)
{
     using (ImageAttributes ia = new ImageAttributes())
     {
         ColorMatrix cm = new ColorMatrix();
         // convert and refactor color palette
         cm.Matrix00 = ParseColor(clr.R);
         cm.Matrix11 = ParseColor(clr.G);
         cm.Matrix22 = ParseColor(clr.B);
         cm.Matrix33 = ParseColor(clr.A);
         cm.Matrix44 = 1f;
         // set matrix
         ia.SetColorMatrix(cm);
         // draw
         g.DrawImage(img, bounds, 0, 0, img.Width, 
                     img.Height, GraphicsUnit.Pixel, ia);
     }
}

The ParseColor in the example code simply converts byte to float values.

glow.jpg

Getting the glow effect is also done using the ImageAttributes class. The image is first inflated, then the color palette and Alpha values are altered, then the clean image is drawn overtop. All this is done by first drawing the control elements into a buffer bitmap:

C#
private void DrawButton()
{
    if (this.Image == null)
        return;

    Rectangle bounds = new Rectangle(0, 0, this.Width, this.Height);
    Rectangle imageBounds = GetImageBounds(bounds, this.Image);

    // draw into a buffer
    using (Graphics g = Graphics.FromImage(_bmpBuffer))
    {
        ...
    }
    // draw the buffer
    using (Graphics g = Graphics.FromHwnd(this.Handle))
        DrawImage(g, _bmpBuffer, bounds);
}

The control comes with most of the properties exposed, like various color states, and optional focus mask and border. Here's a list of the properties:

  • Checked: Checkbox state
  • CheckedBorderColor: The checked border color
  • CheckStyle: Checkbox style
  • FocusedMask: Draw a focused mask
  • ImageDisabledColor: The image disabled color
  • ImageFocusedColor: The image focused color
  • ImageGlowColor: The border glow color
  • ImageHoverColor: The image hover color
  • ImagePressedColor: The image pressed color
  • ImageGlowFactor: Glow factor depth
  • FocusOnHover: Focus on button hover

History

  • 24th February, 2010: Initial post
  • 27th March, 2010: Article screen shot and source code

License

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


Written By
Network Administrator vtdev.com
Canada Canada
Network and programming specialist. Started in C, and have learned about 14 languages since then. Cisco programmer, and lately writing a lot of C# and WPF code, (learning Java too). If I can dream it up, I can probably put it to code. My software company, (VTDev), is on the verge of releasing a couple of very cool things.. keep you posted.

Comments and Discussions

 
GeneralMy vote of 5 Pin
majid torfi2-Nov-14 3:00
professionalmajid torfi2-Nov-14 3:00 
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 8:39
professionalKanasz Robert27-Sep-12 8:39 
GeneralMy vote of 5 Pin
tolw6-Jun-11 0:17
tolw6-Jun-11 0:17 
GeneralSet BackColor as Transparent! Pin
ZhangWenYi from Shanghai, China31-Mar-10 22:22
ZhangWenYi from Shanghai, China31-Mar-10 22:22 
GeneralUpdated Pin
John Underhill28-Mar-10 5:43
John Underhill28-Mar-10 5:43 
GeneralNice but you contradict yourself... Pin
je_gonzalez25-Feb-10 13:03
je_gonzalez25-Feb-10 13:03 
You have a small contradiction between publishing the code under the CPOL license which states:

Source Code and Executable Files can be used in commercial applications;

And comments in your code that say:

You can not:
-Sell or redistribute this code or the binary for profit.

Make up your mind on which way you want to go...
GeneralRe: Nice but you contradict yourself... Pin
John Underhill25-Feb-10 14:51
John Underhill25-Feb-10 14:51 
GeneralNew Version Pin
John Underhill25-Feb-10 10:18
John Underhill25-Feb-10 10:18 
Generalnice control Pin
michael montalvão25-Feb-10 0:03
michael montalvão25-Feb-10 0:03 
GeneralRe: nice control Pin
John Underhill25-Feb-10 3:01
John Underhill25-Feb-10 3:01 
Generalnice control but... Pin
DanielGreen24-Feb-10 21:14
DanielGreen24-Feb-10 21:14 
GeneralCool Pin
Johnny J.24-Feb-10 19:30
professionalJohnny J.24-Feb-10 19:30 
GeneralRe: Cool Pin
John Underhill25-Feb-10 3:00
John Underhill25-Feb-10 3:00 

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.