Adding an LED to your radiobuttons






3.90/5 (6 votes)
Jun 18, 2002
3 min read

145848

1248
Enhance the visual impact of your radio buttons
Introduction
After writing a software front end for my Kenwood R-5000 shortwave receiver,
I was unhappy with the look of the white circle/black dot standard radio buttons.
After all, my Kenwood has these very cool LEDs in
the top corner of each button, to show which is currently active. How to
simulate this in C# to enhance my project? After tinkering with Alexandr
Khilov's very nice cute button, I
hit on it. Subclass it as a RadioButton
instead of a
Button
,draw a
triangle in the top left corner, set it to a color, then add a little
code to tie the whole thing together! I find the end results to be very
attractive visually, and hopefully you'll find uses for it I've never
considered. Here's a snapshot of the demo project to show you what's possible.
Not necessarily tasteful you understand, but possible.
More about the control
I've added a couple of additional touches that are absent from Alex's project, the main one being an attribute header for each property, so a little help is available in design mode:
[
Bindable(true),
Category("Appearance"),
Description("Sets the width of the LED in % of control's width")
]
public int LEDWidth{
get {return m_width;}
set {m_width = value; Invalidate();
}
And of course, several new elements had to be added, here's a quick rundown:
LEDColor
: The color of the LED in OFF Mode. My favorites being DarkRed, Green and DarkGoldenRod (for a yellow LED).LEDWidth
: an integer that represents the percentage of the control's width you want the LED to cover.LEDHeight
: an integer that represents the percentage of the control's height you want the LED to cover. You can make some VERY strange looking LED's by playing with these numbers. I find, about a 10% width and 40% height looks good for a rectangular control.LEDOffset
: The number of pixels between the edge of the control and the LED.
I also changed a couple of Alex's identifiers, since I prefer the button to gradient from top to bottom instead of left to right:
topColor
: sets the color for the top of the control, that will eventually gradient into the color set by the propertybottomColor
. Transparency values are similarly named.
I added a
boolean
variable
onOff
in order to pass the button's
state to the
onPaint
event handler, and added some extra code to
Alex's already excellent work:
if(onOff == true){
c3 = System.Windows.Forms.ControlPaint.LightLight(m_ledcolor);
}
else{
c3 = System.Windows.Forms.ControlPaint.Dark(m_ledcolor);
}
SolidBrush sb = new SolidBrush(c3);
Pen blackPen = new Pen(Color.Black , 2);
//set the drawing points for the triangle
Point point1 = new Point( m_offset, m_offset);
Point point2 = new Point(m_offset, triHeight());
Point point3 = new Point(triWidth(),m_offset);
Point point4 = new Point(m_offset,m_offset);
//put them all in an array of Points
Point[] triPoints = {
point1,
point2,
point3,
point4,
};
pe.Graphics.DrawPolygon(blackPen, triPoints);
//thanks to Anonymous for this suggestion!
pe.Graphics.SmoothingMode=System.Drawing.Drawing2D.
SmoothingMode.HighQuality;
pe.Graphics.FillPolygon(sb,triPoints,
System.Drawing.Drawing2D.FillMode.Winding);
Of particular interest would probably be the
ControlPaint.LightLight
and ControlPaint.Dark
methods.
No need to mess with bit masking or luminosity values to make the
color changes, these functions do all the dirty work! The triHeight()
and triWidth()
functions, simply calculate the number of pixels needed for the
correct size of the triangle.
virtual protected int triHeight(){
float x;
x = this.Height * ((float)m_height/100);
return (int)x;
}
virtual protected int triWidth(){
float x;
x = this.Width * ((float)m_width/100);
return (int)x;
}
Thanks to DeepStack for pointing out how to force the Button
's
Appearance
property to Bu
t
ton
instead of
Default
.
Possible enhancements would include:
Allowing the designer to select which corner to place the LED. I'm happy with the upper left-hand corner, so I left that as a future project.
Changing the shape of the LED to a circle or a square or a diamond or whatever. Again, I was going for a triangular shape to simulate a real-life radio button, so I left it as is.
About Duane Lunday
I'm a very experienced programmer who recently signed a long term non-compensation agreement with my previous employer of 10 years. I've been using my downtime to catch up on C# and the .NET framework in general. If you're interested in shortwave radio software and spy stations in particular, download my SpyCatcher software written in C# at http://www.codedragon.net.