RadioButton in WPF

This tutorial shows you how to create and use a RadioButton control available in Windows Presentation Foundation (WPF) and XAML.
  • 2976


A RadioButton is usually used in a group with multiple options where one has to be selected.

The RadioButton tag represents a RadioButton control in XAML.


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 horizontal alignment to left and vertical alignment to top.

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

The RadioButton looks like 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 Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Blue" >
            C# Corner
        <RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Orange" >
            VB.NET Heaven
        <RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Green" >
            Longhorn Corner
        <RadioButton Margin="10,5,0,0" GroupName="MCSites" Background="Yellow" Foreground="Purple" >

The output looks like Figure 2. If you select one RadioButton, the previous RadioButton will be unselected.


Figure 2

Adding a Checked Event Handler

RadioButton 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 rest of them.

  Private Sub Btn1_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
        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
    End Sub

New RadioButton group looks like Figure 3.


Figure 3.

Finding a Selected Item in the Group

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

   Private Sub button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        If Btn1.IsChecked = True Then
        ElseIf Btn2.IsChecked = True Then
        ElseIf Btn3.IsChecked = True Then
        End If
    End Sub


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


More Articles

© 2020 DotNetHeaven. All rights reserved.