Working with WPF RadioButton using C# and XAML

This tutorial shows you how to create and use a RadioButton control available in Windows Presentation Foundation (WPF) and XAML. A RadioButton is usually used in a group with multiple options where one must be selected.

 

The RadioButton element represents a RadioButton control in XAML.

<RadioButton></RadioButton>

The Width and Height properties represent the width and the height of a RadioButton. The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a RadioButton on the parent control. The HorizontalAlignment and VerticalAlignment properties specify the horizontal and vertical alignments.

The Background and Foreground properties represent the background and foreground colors ofa RadioButton.

The following code snippet sets the name, height, and width of a RadioButton control. The code also sets the horizontal alignment to the left and the vertical alignment to the top.

<RadioButton Margin="10,10,0,13" Name="RadioButton1" HorizontalAlignment="Left"VerticalAlignment="Top" Width="150" Height="15" Background="Yellow " Foreground="Blue">
   C# Corner
</RadioButton>

The RadioButton looks like the following.

Figure 1. RadioButton

RadioButton Grouping

The GroupName property of a RadioButton assigns a RadioButton to a group. Only one RadioButton can be in the selected states at once and by selecting a new RadioButton unselects the previous selected RadioButton.

The following code assigns four RadioButton controls to a group called MCSites.

<RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Blue"> C# Corner </RadioButton>
<RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Orange"> VB.NET Heaven </RadioButton>
<RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Green"> Longhorn Corner </RadioButton>
<RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Purple"> Mindcracker </RadioButton>

The output looks as in Figure 2. If you select one RadioButton then the previous RadioButton will be unselected.

Figure 2

Adding a Checked Event Handler

The RadioButton control has the Checked event as the default event and raised when you check a radio button. The following code snippet adds the event handler.

<RadioButton Name="Btn1" Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Blue" Checked="Btn1_Checked">

The following checked event handler sets the foreground and background colors of the checked RadioButton and sets black and white for the rest of them.

privatevoid Btn1_Checked(object sender, RoutedEventArgs e) {
    Btn1.Foreground = Brushes.Blue;
    Btn1.Background = Brushes.Yellow;
    Btn2.Foreground = Brushes.Black;
    Btn2.Background = Brushes.White;
    Btn3.Foreground = Brushes.Black;
    Btn3.Background = Brushes.White;
    Btn4.Foreground = Brushes.Black;
    Btn4.Background = Brushes.White;
}

The new RadioButton group looks as in Figure 3.

 

Figure 3.

Finding a Selected Item in the Group

The IsChecked property of RadioButton indicates whether a RadioButton is checked. The following code snippet on a button click event handler finds the text of the selected RadioButton in a group.

privatevoid button1_Click(object sender, RoutedEventArgs e) {
    if (Btn1.IsChecked == true) MessageBox.Show(Btn1.Content.ToString());
    elseif(Btn2.IsChecked == true)
    MessageBox.Show(Btn2.Content.ToString());
    elseif(Btn3.IsChecked == true)
    MessageBox.Show(Btn3.Content.ToString());
    else MessageBox.Show(Btn4.Content.ToString());
}

Alternatively, you may want to replace the "if..else" statement with the "switch" statement to make your code read and work better.

Summary

In this article, I explained how to create and use a RadioButton control available in WPF and XAML.