XAML RadioButton in WPF
The XAML RadioButton represents a radio button. This tutorial shows you how to create and use a RadioButton control in WPF.
Introduction
A RadioButton is usually used in a group with multiple options where one must be selected.
The RadioButton tag 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 are used to set horizontal and vertical alignments.
The
Background and
Foreground properties represent the background and foreground colors of a
RadioButton.
The following code snippet sets the name, height and width of a
RadioButton control. The code also sets the horizontal alignment to left and the vertical alignment to top.
- <RadioButton Margin="10,10,0,13" Name="RadioButton1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150" Height="15" Backgroun d="Yellow " Foreground="Blue">
- C# Corner
- </RadioButton>
The
RadioButton looks as in following:
Figure 1. RadioButton
RadioButton GroupingThe
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, the previous RadioButton will be unselected.
Figure 2
Adding a Checked Event HandlerRadioButton control has
Checked event as 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 color of the checked
RadioButton and sets black and white for the rest of them.
- private void 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;
- }
New
RadioButton group looks as in
Figure 3.
Figure 3.
Finding a Selected Item in the GroupThe
IsChecked property of
RadioButton represents whether or not a RadioButton is checked. The following code snippet on a button click event handler finds the text of the selected RadioButton in a group.
- private void button1_Click(object sender, RoutedEventArgs e)
- {
- if( Btn1.IsChecked == true)
- MessageBox.Show(Btn1.Content.ToString());
- else if (Btn2.IsChecked == true)
- MessageBox.Show(Btn2.Content.ToString());
- else if (Btn3.IsChecked == true)
- MessageBox.Show(Btn3.Content.ToString());
- else
- MessageBox.Show(Btn4.Content.ToString());
- }
SummaryIn this article, I discussed how to create and use a
RadioButton control available in WPF and XAML.