RadioButton Control For Windows 10

Introduction 

 

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 buttons for Department and Year from which users 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>

 

 

 

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.

 

 

Summary 

 

In this article, we learned about RadioButton Control For Windows 10.