RadioButton
RadioButton
RadioButton
RadioButton
Class
Definition
Represents a button that allows a user to select a single option from a group of options.
public : class RadioButton : ToggleButton, IRadioButtonpublic class RadioButton : ToggleButton, IRadioButtonPublic Class RadioButton Inherits ToggleButton Implements IRadioButton// This API is not available in Javascript.
<RadioButton .../>
-or-
<RadioButton ...>
content
</RadioButton>
-or-
<RadioButton ...>stringContent</RadioButton>
- Inheritance
-
RadioButtonRadioButtonRadioButtonRadioButton
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Examples
The following example shows three radio buttons. The first two radio buttons are grouped together. The remaining radio button is not grouped explicitly, which means that you can select the third radio button and either the first or second. When you select a radio button, a TextBlock displays the name of the group, if the radio button has an explicit group name, and the name of the radio button.
<TextBlock Text="First Group:" Margin="5" />
<RadioButton x:Name="TopButton" Margin="5" Checked="HandleCheck"
GroupName="First Group" Content="First Choice" />
<RadioButton x:Name="MiddleButton" Margin="5" Checked="HandleCheck"
GroupName="First Group" Content="Second Choice" />
<TextBlock Text="Ungrouped:" Margin="5" />
<RadioButton x:Name="LowerButton" Margin="5" Checked="HandleCheck"
Content="Third Choice" />
<TextBlock x:Name="choiceTextBlock" Margin="5" />
private void HandleCheck(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name;
}
Private Sub HandleCheck(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim rb As RadioButton = TryCast(sender, RadioButton)
choiceTextBlock.Text = "You chose: " + rb.GroupName + ": " + rb.Name
End Sub
Remarks
Use RadioButton controls to limit a user's selection to a single choice within a set of related, but mutually exclusive, choices. You group RadioButton controls by putting them inside the same parent container or by setting the GroupName property on each RadioButton to the same value.

A RadioButton has two states: selected or cleared. When a RadioButton is selected, its IsChecked property is true. When a RadioButton is cleared, its IsChecked property is false. A RadioButton can be cleared by clicking another RadioButton in the same group, but it cannot be cleared by clicking it again. However, a RadioButton can be cleared programmatically by setting its IsChecked property to false.
Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the RadioButton control.
| Resource key | Description |
|---|---|
| RadioButtonBackground | Background color of entire control bounds at rest |
| RadioButtonBackgroundPointerOver | Background color on hover |
| RadioButtonBackgroundPressed | Background color when pressed |
| RadioButtonBackgroundDisabled | Background color when disabled |
| RadioButtonForeground | Label color at rest |
| RadioButtonForegroundPointerOver | Label color on hover |
| RadioButtonForegroundPressed | Label color when pressed |
| RadioButtonForegroundDisabled | Label color when disabled |
| RadioButtonBorderBrush | Border color of entire control bounds at rest |
| RadioButtonBorderBrushPointerOver | Border color on hover |
| RadioButtonBorderBrushPressed | Border color when pressed |
| RadioButtonBorderBrushDisabled | Border color when disabled |
| RadioButtonOuterEllipseStroke | Border color of unselected circular button |
| RadioButtonOuterEllipseStrokePointerOver | Border color of unselected circular button on hover |
| RadioButtonOuterEllipseStrokePressed | Border color of unselected circular button when pressed |
| RadioButtonOuterEllipseStrokeDisabled | Border color of unselected circular button when disabled |
| RadioButtonOuterEllipseFill | Background color of unselected circular button |
| RadioButtonOuterEllipseFillPointerOver | Background color of unselected circular button on hover |
| RadioButtonOuterEllipseFillPressed | Background color of unselected circular button when pressed |
| RadioButtonOuterEllipseFillDisabled | Background color of unselected circular button when disabled |
| RadioButtonOuterEllipseCheckedStroke | Border color of selected circular button |
| RadioButtonOuterEllipseCheckedStrokePointerOver | Border color of selected circular button on hover |
| RadioButtonOuterEllipseCheckedStrokePressed | Border color of selected circular button when pressed |
| RadioButtonOuterEllipseCheckedStrokeDisabled | Border color of selected circular button when disabled |
| RadioButtonOuterEllipseCheckedFill | Background color of selected circular button |
| RadioButtonOuterEllipseCheckedFillPointerOver | Background color selected circular button on hover |
| RadioButtonOuterEllipseCheckedFillPressed | Background color selected circular button when pressed |
| RadioButtonOuterEllipseCheckedFillDisabled | Background color selected circular button when disabled |
| RadioButtonCheckGlyphStroke | Border color of the selected button's 'dot' |
| RadioButtonCheckGlyphStrokePointerOver | Border color of the selected button's 'dot' on hover |
| RadioButtonCheckGlyphStrokePressed | Border color of the selected button's 'dot' when pressed |
| RadioButtonCheckGlyphStrokeDisabled | Border color of the selected button's 'dot' when disabled |
| RadioButtonCheckGlyphFill | Color of the selected button's 'dot' |
| RadioButtonCheckGlyphFillPointerOver | Color of the selected button's 'dot' on hover |
| RadioButtonCheckGlyphFillPressed | Color of the selected button's 'dot' when pressed |
| RadioButtonCheckGlyphFillDisabled | Color of the selected button's 'dot' when disabled |
Constructors
RadioButton() RadioButton() RadioButton() RadioButton()
Initializes a new instance of the RadioButton class.
public : RadioButton()public RadioButton()Public Sub New()// This API is not available in Javascript.
Properties
GroupName GroupName GroupName GroupName
Gets or sets the name that specifies which RadioButton controls are mutually exclusive.
public : PlatForm::String GroupName { get; set; }public string GroupName { get; set; }Public ReadWrite Property GroupName As string// This API is not available in Javascript.
<RadioButton GroupName="nameString"/>
- Value
- PlatForm::String string string string
The name that specifies which RadioButton controls are mutually exclusive. The default is null.
GroupNameProperty GroupNameProperty GroupNameProperty GroupNameProperty
Identifies the GroupName dependency property.
public : static DependencyProperty GroupNameProperty { get; }public static DependencyProperty GroupNameProperty { get; }Public Static ReadOnly Property GroupNameProperty As DependencyProperty// This API is not available in Javascript.
The identifier for GroupName dependency property.