Adding an LED to your radiobuttons

• Download source files - 9.45 Kb
• Download demo project - 20.4 Kb

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 property bottomColor. 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 Button 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.