RadioButton Control For Windows 10

Radio Button represents a button that allows a user to select a single option from a group of options. We use RadioButton controls to limit a user's selection to a single choice within a set of related, but mutually exclusive, choices. You can group RadioButton controls by putting them inside the same parent container or by setting the GroupName property on each RadioButton to the same value.

In the following demo we are making two groups of radio button for Department and Year from which user can select and the selected will be shown in a TextBlock shown.

Step 1: Open a blank app and add two sets of RadioButton and a TextBlock for each either from the toolbox or by copying the following XAML code into your grid.

<TextBlock Text="Radio Button" FontSize="20"></TextBlock>
<StackPanel Margin="10,30,0,0">
    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="0,5,0,0" Text="Select your department"></TextBlock>
        <StackPanel>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="CSE" Checked="deptRadioButton_Checked"></RadioButton>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="ECE" Checked="deptRadioButton_Checked"></RadioButton>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="EEE" Checked="deptRadioButton_Checked"></RadioButton>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="Civil" Checked="deptRadioButton_Checked"></RadioButton>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="Mech" Checked="deptRadioButton_Checked"></RadioButton>
            <RadioButton Margin="10,0,0,0" GroupName="dept" Content="IT" Checked="deptRadioButton_Checked"></RadioButton>
        </StackPanel>
        <TextBlock Margin="0,10,0,0" Name="selectedDept" Foreground="Green"></TextBlock>
    </StackPanel>
    <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
        <TextBlock Margin="0,5,0,0" Text="Select your year"></TextBlock>
        <StackPanel>
            <RadioButton Margin="60,0,0,0" GroupName="year" Content="First" Checked="yearRadioButton_Checked"></RadioButton>
            <RadioButton Margin="60,0,0,0" GroupName="year" Content="Second" Checked="yearRadioButton_Checked"></RadioButton>
            <RadioButton Margin="60,0,0,0" GroupName="year" Content="Third" Checked="yearRadioButton_Checked"></RadioButton>
            <RadioButton Margin="60,0,0,0" GroupName="year" Content="Final" Checked="yearRadioButton_Checked"></RadioButton>
        </StackPanel>
        <TextBlock Margin="0,10,0,0" Name="selectedYear" Foreground="Green"></TextBlock>
    </StackPanel>
</StackPanel>

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.

 

Step 2:  Add the following code to your cs page to handle the event handlers while being getting checked or cleared. 

private void deptRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rbd = sender as RadioButton;
    selectedDept.Text ="You have selected " + rbd.Content.ToString();
}

private void yearRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rby = sender as RadioButton;
    selectedYear.Text = "You have selected " + rby.Content.ToString();
}

Step 3: Run your application and check yourself.