Working with the RadioButton and CheclBox controls

The Follow exercise will give you a first look at eh RadioButton and CheckBox controls. You will build a simple survey.

1. create a new silverlight application in visual studio and call it CheckBoxRadioButton. allow visual sutdio to create a web application project to host the application.

2. in the mainpage.xaml file, divide the root grid into two rows. in each row, place a stackpanel with vertical orientation and a margin property set to 10.

　　<Grid x:Name="LayoutRoot" Background="White">

　　　　<Grid.RowDefinitions>

　　　　　　<RowDefinition />

　　　　　　<RowDefinition />

　　　　</Grid.RowDefinitions>

　　　　<StackPanel Orientation="Vertical" Margin="10" />

　　　　<StackPanel Orientation="Vertical" Grid.Row="1" Margin="10" />

　　</Grid>

　　the top row will be used to demonostrate the use of the radiobutton control, and the bottom row will feature the checkbox control. Let's begin the RadioButton.

　　The RadioButton control allows users to select only one selection out of a number of RadioButton controls that share the same group name. This is set using the RadioButton's Grouping property.

　　although you could simply type in each of the color choices for the radio buttons as text using the Content property, I thought it would be less boring to use colored rectangles instead.

3. Place five RadioButton controls in the first StackPanel, each with a Rectangle control of a different color. For the group name, use Favoritecolor. To make the content of RadioButton controls display as left-justified, set the HorizontalAlignment property to Left for each one. Here is the code:

　　<StackPanel Orientation = "Vertical" Grid.Row="0" Margin="0">

　　　　<TextBlock Text = "What is your favorite color?" />

　　　　<RadioButton HorizontalAlignment = "Left" GroupName="FavoriteColor" >

　　　　　　<Rectangle Width = "100" Height = "10" Fill = "Red" />

　　　　</RadioButton>

　　　　<RadionButon HorizontalAlignment = "Left" GroupName="Favoritecolor" >

　　　　　　<Rectangle WIdth = "100" Height = "10" Fill="Blue" />

　　　　</RadioButton>

　　　　<RadioButton HorizontalAlignment = "Left" GroupName="FavoriteColor" >

　　　　　　<Rectangle Width = "100" Height = "10" Fill = "Green" />

　　　　</RadioButton>

　　　　<RadionButon HorizontalAlignment = "Left" GroupName="Favoritecolor" >

　　　　　　<Rectangle WIdth = "100" Height = "10" Fill="Yello" />

　　　　</RadioButton>　

　　　　<RadioButton HorizontalAlignment = "Left" GroupName="FavoriteColor" >

　　　　　　<Rectangle Width = "100" Height = "10" Fill = "Purple" />

　　　　</RadioButton>

　　</StackPanel>　　　

　　Next, do the same for the CheckBox controls in the bottom row, except here, just go the boring route and supply the choices as text. In addition, CheckBox controls are left-justified by default, and they do not need to be grouped. Here is the code for the CheckBox portion:

　　<StackPanel Orientation  ="Vertical" Grid.Row="1" Margin="10">

　　　　<TextBlock Text="What Technologies are you familiar with?" />

　　　　<CheckBox Content="Silverlight" />

　　　　<CheckBox Content="ASP.NET" />

　　　　<CheckBox Content="Visual Studio 2010" />

　　　　<CheckBox COntent = "Expression Blend 4" />

　　</StackPanel>

4. Go ahead and run the solution to see the end result as it will appear in the brower. Notice that, as you would expect, you are able to select only one radio button at a time, but you can click as many check boxes as you wish.