Working with CheckBoxes and RadioButtons
CheckBox is-a ToggleButton, which is-a ButtonBase. This may seem very odd given that the UI of a button looks
very different from that of a check box. However, a CheckBox type, like a Button, can be clicked, responds to
mouse and keyboard input, and follows the content model. Given all of these similarities, it turns out that the
CheckBox type simply overrides various virtual members of ToggleButton to establish a ‘check box’ look and feel.
<CheckBox IsChecked="true" Height="50"
Content="Would you like to get our newsletter?"/>
RadioButton is another class that is-a ToggleButton. Unlike the CheckBox type, however, it has the innate ability
to ensure all RadioButtons in the same container are mutually exclusive. When you wish to have a single container
with multiple RadioButton types that behave as distinct physical groupings, you can do so by setting the
GroupName property on the opening element of the RadioButton type.
<StackPanel>
<!-- The Music group. -->
<TextBox FontSize = "15" Text = "Select Your Music Media"/>
<RadioButton GroupName = "Music" Content="CD Player"/>
<RadioButton GroupName = "Music" Content="MP3 Player"/>
<RadioButton GroupName = "Music" Content="8-Track"/>
<!-- The Color group. -->
<TextBox FontSize = "15" Text = "Select Your Color Choice"/>
<RadioButton GroupName = "Color" Content="Red"/>
<RadioButton GroupName = "Color" Content="Green"/>
<RadioButton GroupName = "Color" Content="Blue"/>
</StackPanel>
If you wish to visually wrap related RadioButtons within a visual frame, use the Border control. The Border, like
other ContentControl derived types, can only have a single piece of content. Therefore, to wrap a series of
RadioButtons into a Border, use a containing element such as a StackPanel.
<StackPanel Background="White">
<Border BorderBrush="Red" BorderThickness="2" Margin="10">
<StackPanel>
<!-- The Music group. -->
<TextBox FontSize = "15" Text = "Select Your Music Media"/>
<RadioButton GroupName = "Music" Content="CD Player"/>
<RadioButton GroupName = "Music" Content="MP3 Player"/>
<RadioButton GroupName = "Music" Content="8-Track"/>
</StackPanel>
</Border>
<Border BorderBrush="Green" BorderThickness="9" Height="150" Margin="10">
<StackPanel>
<!-- The Color group. -->
<TextBox FontSize = "15" Text = "Select Your Color Choice"/>
<RadioButton GroupName = "Color" Content="Red"/>
<RadioButton GroupName = "Color" Content="Green"/>
<RadioButton GroupName = "Color" Content="Blue"/>
</StackPanel>
</Border>
</StackPanel>
CheckBox is-a ToggleButton, which is-a ButtonBase. This may seem very odd given that the UI of a button looks
very different from that of a check box. However, a CheckBox type, like a Button, can be clicked, responds to
mouse and keyboard input, and follows the content model. Given all of these similarities, it turns out that the
CheckBox type simply overrides various virtual members of ToggleButton to establish a ‘check box’ look and feel.
<CheckBox IsChecked="true" Height="50"
Content="Would you like to get our newsletter?"/>
RadioButton is another class that is-a ToggleButton. Unlike the CheckBox type, however, it has the innate ability
to ensure all RadioButtons in the same container are mutually exclusive. When you wish to have a single container
with multiple RadioButton types that behave as distinct physical groupings, you can do so by setting the
GroupName property on the opening element of the RadioButton type.
<StackPanel>
<!-- The Music group. -->
<TextBox FontSize = "15" Text = "Select Your Music Media"/>
<RadioButton GroupName = "Music" Content="CD Player"/>
<RadioButton GroupName = "Music" Content="MP3 Player"/>
<RadioButton GroupName = "Music" Content="8-Track"/>
<!-- The Color group. -->
<TextBox FontSize = "15" Text = "Select Your Color Choice"/>
<RadioButton GroupName = "Color" Content="Red"/>
<RadioButton GroupName = "Color" Content="Green"/>
<RadioButton GroupName = "Color" Content="Blue"/>
</StackPanel>
If you wish to visually wrap related RadioButtons within a visual frame, use the Border control. The Border, like
other ContentControl derived types, can only have a single piece of content. Therefore, to wrap a series of
RadioButtons into a Border, use a containing element such as a StackPanel.
<StackPanel Background="White">
<Border BorderBrush="Red" BorderThickness="2" Margin="10">
<StackPanel>
<!-- The Music group. -->
<TextBox FontSize = "15" Text = "Select Your Music Media"/>
<RadioButton GroupName = "Music" Content="CD Player"/>
<RadioButton GroupName = "Music" Content="MP3 Player"/>
<RadioButton GroupName = "Music" Content="8-Track"/>
</StackPanel>
</Border>
<Border BorderBrush="Green" BorderThickness="9" Height="150" Margin="10">
<StackPanel>
<!-- The Color group. -->
<TextBox FontSize = "15" Text = "Select Your Color Choice"/>
<RadioButton GroupName = "Color" Content="Red"/>
<RadioButton GroupName = "Color" Content="Green"/>
<RadioButton GroupName = "Color" Content="Blue"/>
</StackPanel>
</Border>
</StackPanel>
Radiobuttons and Checkboxes
Table of Contents
Copyright (c) 2008. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Courseware
Training Resources
Tutorials
Services