Windows Phone 7 : The Silverlight Controls (part 5) - Interactive Controls - CheckBox Controls, RadioButton Controls

2.4. CheckBox Controls

A simple but useful control, the CheckBox allows simple boolean values to be gathered from the user. When the control's value is true, it displays a check mark within the control; when it is false, the box is shown empty.

The caption displayed next to the CheckBox is part of the control itself rather than being implemented as a separate control, so tapping on either the actual displayed box or its caption will cause the state of the box to be toggled.

The caption is provided using the CheckBox control's Content property, and is not limited to being just a simple string: other controls can be placed into the content to provide additional formatting options.

A few useful properties that we might want to use are offered by the control. Among them are the IsChecked property, which allows the initial state of the CheckBox to be set (and which can, of course, also be set or queried in code to update or read the state of the control).

Another potentially useful property is the IsThreeState property. When this property is set to true, the CheckBox will cycle through three different states when it is tapped: checked, unchecked, and indeterminate. This final state can be used when the CheckBox is at an unknown state or when its value cannot currently be represented as a simple boolean value. When the control's value is indeterminate, the IsChecked property in code will return null. To set this in XAML, the special value {x:Null} must be provided for the property (though this can be picked from the Properties window).

Listing 8 shows the XAML for three CheckBox controls, each with a different initial state.

Example 8. Several CheckBox controls

<CheckBox Height="70" Width="215" Margin="50,100" VerticalAlignment="Top"
                                            Content="Unchecked" />
        <CheckBox Height="70" Width="215" Margin="50,160" VerticalAlignment="Top"
                                            Content="Checked" IsChecked="True" />
        <CheckBox Height="70" Width="215" Margin="50,220" VerticalAlignment="Top"
                                            Content="Indeterminate" IsChecked="{x:Null}" />

					  

The resulting controls are shown in Figure 10.

Figure 10. The resulting CheckBox controls

The CheckBox offers two different ways of responding to its state changing. The first is to add a handler for its Click event that will fire every time the control is tapped by the user, allowing the IsChecked property to be queried to determine the control's new value.

Alternatively. you might add handlers to any or all of the Checked, Unchecked, or Indeterminate events. These handlers will fire when the CheckBox is updated to the corresponding state. If they are used as well as the Click event, the Click event will fire after the approriate state-based event.

2.5. RadioButton Controls

RadioButton controls offer similar functionality to the CheckBox, except that they are formed into mutually exclusive groups from which only a single RadioButton at a time can be selected. The properties and events used by the RadioButton are virtually identical to those of the CheckBox.

An additional property, called GroupName, is available, however. It is not set by default, and will result in the radio buttons being set as a group according to the container that they are placed in (only one of the radio buttons in the container can be selected). In many cases, this will be the desirable behavior, but if you want to have radio buttons that span across multiple containers or if you want to create separate groups of radio buttons within the same container, set the GroupName to a consistent value for all the controls within each group. Silverlight will look after everything else.

2.6. Button Controls

The next of the interactive controls that we will look at is also one of the simplest. Button controls simply display some content within a rectangular frame on the screen and respond to being clicked by raising their Click event.

The Button's text is specified within its Content property, but once again the property is not limited only to strings. Other UI elements can be placed within the button to facilitate buttons with images or other content.