.NET 4.0+

WPF Selection Controls - RadioButton

by Richard Carr, published at http://www.blackwasp.co.uk/WPFRadioButton.aspx

The sixty-ninth part of the Windows Presentation Foundation Fundamentals tutorial continues to examine the selection controls of WPF. This article describes the RadioButton, which allows users to select one of several options.

RadioButton

The RadioButton control is the second of the five selection controls of Windows Presentation Foundation (WPF). Radio buttons are used when you wish to present the user with several options, from which they should select only one. They are usually used when there are only a few options available; for large numbers a drop-down list or a list box is generally a better choice.

Each RadioButton represents one of the available options and acts in a similar manner to a CheckBox. However, whereas a CheckBox is generally independent of other controls, RadioButtons are linked. Selecting one RadioButton, by clicking it, clears the others in the group.

To demonstrate the use of the RadioButton control we need a sample project. Create a new WPF Application project in Visual Studio, setting its name to "RadioButtonDemo". Once the solution is ready, replace the XAML in the main window with the following:

<Window x:Class="RadioButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButton Demo"
        Height="120"
        Width="250">
    <Grid Background="LemonChiffon">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="1.7*"/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <RadioButton Grid.Row="0">Left Handed</RadioButton>
        <RadioButton Grid.Row="1">Right Handed</RadioButton>
        <RadioButton Grid.Row="2">Fast Double-Click</RadioButton>
        <RadioButton Grid.Row="3">Slow Double-Click</RadioButton>
    </Grid>
</Window>

The resultant window appears as shown below:

Try running the program and clicking the radio buttons to see the results. You should see that only one can be selected at any time.

Reading and Setting the RadioButton State

RadioButtons share a base class with CheckBoxes, allowing you to configure and interact with them in much the same way. To determine the state of the control you can set or read the IsChecked property, which is true when selected, false when not selected and null when in an indeterminate state. You can also subscribe to the Checked, Unchecked and Indeterminate events, which are raised when the state changes to the appropriate value.

To demonstrate, modify the "Right Handed" RadioButton's XAML, as shown below. This will cause that option to be selected when the window is first loaded.

<RadioButton Grid.Row="1" IsChecked="True">Right Handed</RadioButton>

Grouping Radio Buttons

In the example window, all of the RadioButtons are linked. In reality, we would want to allow the user to choose two options. One would be to determine whether the mouse was configured as left or right handed and one would specify if the double-click speed should be fast or slow. To allow this, we must group the radio buttons.

To group a set of RadioButton controls, you set the GroupName property to a string value. All of the radio buttons with the same group name are linked but are not connected to controls in other groups.

To demonstrate, let's set the group name for the first two controls to "Handed". For the other two RadioButtons we'll use the name, "Speed". Modify the code for the four controls as follows:

<RadioButton Grid.Row="0" GroupName="Handed">Left Handed</RadioButton>
<RadioButton Grid.Row="1" GroupName="Handed" IsChecked="True">Right Handed</RadioButton>
<RadioButton Grid.Row="2" GroupName="Speed" IsChecked="True">Fast Double-Click</RadioButton>
<RadioButton Grid.Row="3" GroupName="Speed">Slow Double-Click</RadioButton>

Run the program again to see the effect. You will find that the two pairs of RadioButtons are now independent of each other.