How to add radio buttons (XAML)

Article
03/01/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This tutorial walks you through the steps to add radio buttons to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add radio buttons in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add radio buttons in code at runtime.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

RadioButton

Prerequisites

We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

Instructions

Step 1: Add radio buttons in XAML

To add radio buttons in XAML

Add a RadioButton control to a parent container.
To assign a name to the radio button, set the x:Name attribute to a string value.

To refer to a control in code, it must have a name. Otherwise, a name is not required.
To assign a label to the radio button, set the Content property to a string value.
To assign a radio button to a group, set the GroupName property to a string value.

Only one radio button in a group can be selected. All radio buttons in the same parent container that don't have their GroupName property set are implicitly grouped together.

To perform an action when the radio button state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.

  <StackPanel Margin="40">
      <RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" 
                   Checked="RadioButton_Checked"/>
      <RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" 
                   Checked="RadioButton_Checked" IsChecked="True"/>
      <RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" 
                   Checked="RadioButton_Checked"/>
      <RadioButton x:Name="radioButtonA" Content="RadioButton A" GroupName="Group2" 
                   Checked="RadioButton_Checked"/>
      <RadioButton x:Name="radioButtonB" Content="RadioButton B" GroupName="Group2" 
                   Checked="RadioButton_Checked"/>
  </StackPanel>

void MainPage::RadioButton_Checked(Object^ sender, RoutedEventArgs^ e)
{
    // Add code to perform some action here.
}

private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
    // Add code to perform some action here.
}

Private Sub RadioButton_Checked()
    ' Add code to perform some action here.
End Sub

To check the state of the control outside of the Checked event, use the IsChecked property.

Step 2: Add radio buttons in code

To add radio buttons in code

Create a new RadioButton.
To assign a label to the radio button, set the Content property to a string value.
To perform an action when the radio button state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.
To assign a radio button to a group, set the GroupName property to a string value.

Only one radio button in a group can be selected. All radio buttons in the same parent container that don't have their GroupName property set are implicitly grouped together.
Repeat steps 1 - 4 for each radio button you need.

Add the RadioButton controls to a parent container in the visual tree to make the radio buttons show in the UI.

// Create new radio buttons, set their content, 
// and add a Checked event handler.
RadioButton^ radioButton1 = ref new RadioButton();
radioButton1->Content = "Radio Button 1";
radioButton1->GroupName = "Group1";
radioButton1->Checked += 
    ref new RoutedEventHandler(this, &MainPage::RadioButton_Checked);

RadioButton^ radioButton2 = ref new RadioButton();
radioButton2->Content = "Radio Button 2";
radioButton2->GroupName = "Group1";
radioButton2->Checked += 
    ref new RoutedEventHandler(this, &MainPage::RadioButton_Checked);

// Add the radio buttons to a parent container in the visual tree.
stackPanel1->Children->Append(radioButton1);
stackPanel1->Children->Append(radioButton2);

// Create new radio buttons, set their content, 
// and add a Checked event handler.
RadioButton radioButton1 = new RadioButton();
radioButton1.Content = "Radio Button 1";
radioButton1.GroupName = "Group1";
radioButton1.Checked += RadioButton_Checked;

RadioButton radioButton2 = new RadioButton();
radioButton2.Content = "Radio Button 2";
radioButton2.GroupName = "Group1";
radioButton2.Checked += RadioButton_Checked;

// Add the radio buttons to a parent container in the visual tree.
stackPanel1.Children.Add(radioButton1);
stackPanel1.Children.Add(radioButton2);

' Create new radio buttons, set their content, 
' and add a Checked event handler.
Dim radioButton1 = New RadioButton()
radioButton1.Content = "Radio Button 1"
radioButton1.GroupName = "Group1"
AddHandler radioButton1.Checked, AddressOf Me.RadioButton_Checked

Dim radioButton2 = New RadioButton()
radioButton2.Content = "Radio Button 2"
radioButton2.GroupName = "Group1"
AddHandler radioButton2.Checked, AddressOf Me.RadioButton_Checked

' Add the radio buttons to a parent container in the visual tree.
stackPanel1.Children.Add(radioButton1)
stackPanel1.Children.Add(radioButton2)

void MainPage::RadioButton_Checked(Object^ sender, RoutedEventArgs^ e)
{
    // Add code to perform some action here.
}

private void RadioButton_Checked(object sender, RoutedEventArgs e)
{
    // Add code to perform some action here.
}

Private Sub RadioButton_Checked()
    ' Add code to perform some action here.
End Sub

To check the state of the control outside of the Checked event, use the IsChecked property.

Step 3: Add radio buttons using a design tool

To add radio buttons using a design tool

Select the RadioButton control.
- In Microsoft Visual Studio, select the RadioButton in the Toolbox pane.
- In Blend for Visual Studio, select the RadioButton in the Assets pane.
  
  Select Controls in the left side of the Assets pane if it's not selected.
Add a RadioButton to the design surface. Do one of these:
- Double-click the radio button. The radio button is added to the selected parent container with default position and size settings.
- Drag the radio button to the design surface and drop it. The radio button is added in the position where you drop it with default size and content settings.
- Draw the radio button control onto the design surface. The radio button is added with the size and position settings that you draw.
If you need to, assign a name to the RadioButton. With the radio button selected, type the name into the Name property text box.

The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.
Update the RadioButton content. Do one of these:
- With the radio button selected, click the radio button to make the label content editable. Type new content into the radio button label on the design surface.
- Type the content string into the Content property text box.
  
  If the Properties pane is arranged by Category, the Content property is in the Common category.
To perform an action when the radio button state changes, add a handler for the Checked event. In the Checked event handler, add code to perform some action.
1. Select the Event view in the Property pane.
2. With the radio button selected on the design surface, do one of these:
  - Double click the Checked event text box to add a handler with a default name.
  - Type a name into the Checked event text box and press Enter to add a handler with a custom name.

RadioButton

Guidelines and checklist for radio buttons

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++