Radio Buttons and Group Boxes

Someday, no one will know why they're called radio buttons. You see, car radios once came equipped with a row of tall buttons that could be set to favorite radio stations. To select a station, you pushed in a button, which caused the previously pushed-in button to pop out. Because only one button could be pressed at a time, a group of radio button controls always reflects a group of mutually exclusive options.

What makes radio buttons different from other controls is that they always exist in a group. Because one (and only one) button in a group can be checked at any time, the states of the radio buttons affect each other. Turning one radio button on turns another off. The keyboard navigation is also somewhat different. Within a group of radio buttons, the arrow keys are supposed to move the input focus from button to button. As the input focus changes, the checked radio button also changes. The Tab key is supposed to move from the group of radio buttons to the next control. When you use the Tab key to move into a group of radio buttons, the checked radio button receives the input focus.

Fortunately, much of this user interface is taken care of for you. For each group of radio buttons, all you need to do is create a control of type GroupBox and make the GroupBox a child of your form. Then you make all the RadioButton objects in the group children of the GroupBox.

Let's look at the RadioButton class first. Like CheckBox, the RadioButton class includes properties named Checked and AutoCheck:

RadioButton Properties (selection)








Default is false




Default is true

The Checked property indicates whether the radio button is checked (which it visually illustrates by displaying a solid dot in a circle). Keeping the AutoCheck property set to true automates the process of using radio buttons. As the user clicks the radio buttons (or moves the input focus among the group), the radio buttons are automatically checked and unchecked. If you set AutoCheck to false, you'll have to install Click event handlers and do all the checking and unchecking yourself.

The only other public properties that RadioButton defines are Appearance and CheckAlign, which work just as they do in the CheckBox class.

The CheckedChanged event occurs whenever a radio button is checked or unchecked, either by the user or by the program:

RadioButton Events (selection)









You'll get two CheckedChanged events in a row, one for the radio button being unchecked and then one for the radio button being checked. You can tell these two events apart by looking at the Checked property of the button. During the CheckedChanged event, the Checked property reflects the new state.

The GroupBox class is a descendent of Control but implements only one public property (FlatStyle) and no additional methods or events beyond what Control defines.

Let's look at an example. The following program draws an ellipse based on the setting of eight radio buttons and one check box.


// RadioButtons.cs ® 2001 by Charles Petzold //-------------------------------------------

using Systera;

using Systera.Drawing;

using Systera.Windows.Forras;

class RadioButtons: Form {

bool bFillEllipse; Color colorEllipse;

static void Main() {

Application.Run(new RadioButtons());

RadioButtons() {

Text = "Radio Buttons Derao"; ResizeRedraw = true;

string[] astrColor = { "Black", "Blue", "Green", "Cyan",

"Red", "Magenta", "Yellow", "White"};

GroupBox grpbox = new GroupBox(); grpbox.Parent = this; grpbox.Text = "Color";

grpbox.Location = new Point(Font.Height / 2, Font.Height / 2); grpbox.Size = new Size(9 * Font.Height,

RadioButton radiobtn = new RadioButton(); radiobtn.Parent = grpbox;

radiobtn.Text = astrColor[i];

radiobtn.Location = new Point(Font.Height,

radiobtn.Size = new Size(7 * Font.Height,

radiobtn.CheckedChanged += new

EventHandler(RadioButtonOnCheckedChanged); if(i == 0)

radiobtn.Checked = true;

CheckBox chkbox = new CheckBox(); chkbox.Parent = this; chkbox.Text = "Fill Ellipse";

chkbox.Location = new Point(Font.Height,

chkbox.Size = new Size(Font.Height * 7, 3 * Font.Height /

chkbox.CheckedChanged +=

new EventHandler(CheckBoxOnCheckedChanged);

void RadioButtonOnCheckedChanged(object obj, EventArgs ea) {

RadioButton radiobtn = (RadioButton) obj;

if(radiobtn.Checked) {

colorEllipse = Color.FromName(radiobtn.Text); Invalidate(false);

void CheckBoxOnCheckedChanged(object obj, EventArgs ea) {

bFillEllipse = ((CheckBox)obj).Checked; Invalidate(false);

protected override void OnPaint(PaintEventArgs pea) {

Graphics grfx = pea.Graphics;

Rectangle rect = new Rectangle(10 * Font.Height, 0,

ClientSize.Width -

if (bFillEllipse)

grfx.FillEllipse(new SolidBrush(colorEllipse), rect);

else grfx.DrawEllipse(new Pen(colorEllipse), rect);

An array of eight colors is defined toward the beginning of the constructor. All the vertical coordinates and sizes the program calculates are generalized enough to accommodate additional colors in this array, just as long as you make sure they're actual .NET Framework color names. (The width of the controls isn't sufficient to accommodate some of the longer color names, however.)

The constructor first creates a GroupBox control. The parent of the group box is the form. Next, the constructor creates eight radio buttons that are children of the group box. Notice at the bottom of the for loop that the program sets the Checked property of the first radio button. That statement generates a call to RadioButtonOnCheckedChanged, which initializes the colorEllipse field. The constructor concludes by creating a CheckBox control as a child of the form.

You can test that the keyboard interface works as I described. As you use the arrow keys to move the focus among the radio buttons, the buttons make calls to RadioButtonOnCheckedChanged. That method uses the static Color.FromName method to convert the button text to a Color object. Both this method and CheckBoxOnCheckedChanged invalidate the client area to generate a call to OnPaint, which paints the ellipse:

Ellips Radio Button
0 0

Post a comment