WPF Radio Button


The WPF radio button control is a type of button that derives from ToggleButton. It is unique because it has built-in support for mutual exclusion. When multiple radio buttons are grouped together, only one can be checked at a time. Radio buttons are perfect for multiple-choice questions.

Putting a bunch of radio buttons in the same group is easy. By default, any radio buttons that share the same direct logical parent are automatically grouped together. Radio buttons that share, for example, the same StackPanel are automatically grouped together so that you can only select one radio button at a time.

Below are the results of the example program.

Below is the XAML code. Grouping radio buttons is easy with the GroupName property.

<Window x:Class="RadioButtonSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RadioButtonSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="RadioButtonSimple" Height="300" Width="300">
    <StackPanel Margin="10">
        <StackPanel>
            <RadioButton Name="RBtnNumber1">Number 1</RadioButton>
            <RadioButton Name="RBtnNumber2">Number 2</RadioButton>
            <RadioButton Name="RBtnNumber3">Number 3</RadioButton>
        </StackPanel>
        <Separator BorderThickness="1" BorderBrush="Crimson"/>
        <StackPanel>
            <RadioButton>Door 1</RadioButton>
            <RadioButton>Door 2</RadioButton>
            <RadioButton>Door 3</RadioButton>
        </StackPanel>
        <Separator BorderThickness="1" BorderBrush="Crimson"/>
        <StackPanel>
            <RadioButton GroupName="A">A 1</RadioButton>
            <RadioButton GroupName="A">A 2</RadioButton>
        </StackPanel>
        <Separator/>
        <StackPanel>
            <RadioButton GroupName="A">A 3</RadioButton>
            <RadioButton GroupName="A">A 4</RadioButton>
        </StackPanel>
    </StackPanel>
</Window>

As an aside, I used the Separator and was able to give the border a Crimson color, but the BorderThickness does not change to be thicker when you increase the value to more than 1.

IsChecked Property in Code-Behind

Below is the code behind. When you click the button, a message box appears telling you what you have chosen (or not chosen) in the first set of radio buttons. This would be very useful if you are doing a Wizard and you don’t allow the user to advance to the next question until they answer this one. You could offer a Don’t Know answer if necessary.

using System.Windows;
namespace RadioButtonSimple
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void BtnResults_Click(object sender, RoutedEventArgs e)
        {
            // We need to cast to bool otherwise we get an error that says
            // Cannot implicitly convert type bool? to bool
            // bool? is a nullable type.
            if ((bool)RBtnNumber1.IsChecked) { MessageBox.Show("1"); }
            else if ((bool)RBtnNumber2.IsChecked) { MessageBox.Show("2"); }
            else if ((bool)RBtnNumber3.IsChecked) { MessageBox.Show("3"); }
            else { MessageBox.Show("Please select eeither Number 1, 2 or 3"); }
        }
    }
}