GlowButton - A Glowing Button Control






4.70/5 (24 votes)
A simple media control button

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

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:
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 stateCheckedBorderColor
: The checked border colorCheckStyle
: Checkbox styleFocusedMask
: Draw a focused maskImageDisabledColor
: The image disabled colorImageFocusedColor
: The image focused colorImageGlowColor
: The border glow colorImageHoverColor
: The image hover colorImagePressedColor
: The image pressed colorImageGlowFactor
: Glow factor depthFocusOnHover
: Focus on button hover
History
- 24th February, 2010: Initial post
- 27th March, 2010: Article screen shot and source code