RadioButton in Silverlight


Introduction

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.

 

<RadioButton></RadioButton>

 

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,0" GroupName="MCSites" Background="Yellow"

             Foreground="Blue" Content="C# Corner">

</RadioButton>

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,10,0,0" GroupName="MCSites" Background="Yellow"

             Foreground="Blue" Content="C# Corner">

</RadioButton>

<RadioButton Margin="10,50,0,0" GroupName="MCSites" Background="Yellow"

             Foreground="Orange" Content="VB.NET Heaven" >

</RadioButton>

 

<RadioButton Margin="10,90,0,0" GroupName="MCSites" Background="Yellow"

             Foreground="Green" Content="Longhorn Corner">

</RadioButton>

<RadioButton Margin="10,130,0,0" GroupName="MCSites" Background="Yellow"

             Foreground="Purple" Content="Mindcracker">

</RadioButton>

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.  I also add x:Name property for all RadioButton controls.

<RadioButton Margin="10,10,0,0" GroupName="MCSites" Background="Yellow"

             Foreground="Blue" Content="C# Corner" Click="RadioButton_Click" x:Name="Button4"

>

</RadioButton>

I also add a TextBox to the page.

 

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.

The following checked event handler sets the Text property of the TextBox to the content of the RadioButton on the radio button click event handler.

 

private void RadioButton_Click(object sender, RoutedEventArgs e)

{

    if (Button1.IsChecked == true)

        TextBox1.Text = Button1.Content.ToString();

 

    else if (Button2.IsChecked == true)

        TextBox1.Text = Button2.Content.ToString();

 

    else if (Button3.IsChecked == true)

        TextBox1.Text = Button3.Content.ToString();

 

    else

        TextBox1.Text = Button4.Content.ToString();

 

}

New RadioButton group looks like Figure 3.

 

Figure 3.

Summary

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

 


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.