RadioButton control styling tips
.png "Ee341408.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The RadioButton control represents an object that will react to user input from a mouse, keyboard, or other input device, and cycle through three different states (Checked, Indeterminate, and Unchecked) that will raise associated events.
As with all controls, the RadioButton control can be modified to look very different from its default appearance. By default, the RadioButton control looks like the following:
.png "Ee341408.a79fb949-5f67-4c15-afd5-5f28abd2ae07(en-us,Expression.30).png")
RadioButton control properties of interest
The RadioButton control is a content control. Therefore, you can display text in the RadioButton control by setting the Content property under Common Properties in the Properties panel.
You can set the ClickMode property to determine when the Click event is fired: when the mouse is clicked or released, or when the pointer hovers over the RadioButton control.
You can also set the IsChecked property to display a check mark in the RadioButton control, and set the IsThreeState property to enable the RadioButton control to use the Indeterminate state in addition to the Checked and Unchecked states.
If multiple RadioButton objects are associated, only one can be selected at a time in your running application. You can associate multiple RadioButton objects by entering the same name in the GroupName property. By default, all RadioButton objects that are added to the artboard in Microsoft Expression Blend are associated by an empty GroupName property.
You can set these properties in the following ways:
Set the properties of the object After you draw a RadioButton object on the artboard, you can set the properties of the object directly. If you want several RadioButtons objects to use the same values, you can set these properties in a style.
Set the properties in a style If you set these properties in the style
.png "Ee341408.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of the RadioButton object, any RadioButton object that uses that style will use those values. You can overwrite the values for a specific object.For more information, see Create a style.
The RadioButton control changes appearance depending on which state it is in. You can modify the appearance of each state while in template-editing mode by selecting a state in the States panel.
For more information, see the states in the following lists, and see Defining different visual states for a control.
To specify what happens when the RadioButton object is clicked, drag a behavior onto the RadioButton object or onto an object in the RadioButton template. For more information, see Adding behaviors to objects.
Optionally, you can hook up the Click event to an event handler. For more information, see Writing code that will respond to events.
Parts of the RadioButton template
The RadioButton control has no parts.
States of the RadioButton control
By default, the RadioButton control can be in one of the following four states in the CommonStates state group, which you can view in the States panel when modifying a RadioButton template:
State name |
Description |
|---|---|
Normal |
The appearance of the RadioButton control when there is no interaction with the control. |
MouseOver |
The appearance of the RadioButton control when the user moves the pointer over it. |
Pressed |
The appearance of the RadioButton control when the user clicks it, or when the control has focus and the user presses ENTER or SPACEBAR. |
Disabled |
The appearance of the RadioButton control when the IsEnabled property is set to False. |
The RadioButton control can be in one of the following two states of the FocusStates state group:
State name |
Description |
|---|---|
Unfocused |
The appearance of the RadioButton control when it does not have keyboard focus. |
Focused |
The appearance of the RadioButton control when it has keyboard focus. For example, a user might press the TAB key to cycle through the objects in your application until keyboard focus is on the RadioButton control. |
The RadioButton control can be in one of the following three states of the CheckStates state group:
State name |
Description |
|---|---|
Unchecked |
The appearance of the RadioButton control when the IsChecked property is set to False. |
Checked |
The appearance of the RadioButton control when the IsChecked property is set to True. |
Indeterminate |
The appearance of the RadioButton control when the IsThreeState property is set to True. |
Tip
A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.
When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button .png "Ee341408.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).png")
, or select Base in the States panel. To modify the appearance of your control when two separate states are active, you can pin a preview of a state in one state group while you modify a state in a different state group.
To convert objects into a RadioButton control
Because the RadioButton control has no parts, you can convert any objects into a RadioButton control.
Group your objects into a layout panel, select the layout panel, and then, on the Tools menu, click Make Into Control.
In the dialog box that appears, select RadioButton, name your template, and select the location where the template will be stored.
For information about locations, see Create a resource.
After you click OK, Expression Blend enters template-editing mode and displays the objects that make up your RadioButton control. You can continue to modify your template in this mode. For example, add or modify objects, or select a state in the States panel to modify the appearance of your template in that state.
Consider binding some of the brush properties of objects in your template to the following properties of the RadioButton object that will eventually use your template:
Background
BorderBrush
Foreground
BorderThickness
For more information, see Carry object properties through to the template.
To exit template-editing mode, click [RadioButton] in the breadcrumb bar at the top of the artboard, or click Return scope to
.png "Ee341408.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel.
For information about applying your new RadioButton template to other RadioButton objects, see Apply or remove a resource.
References
You can find detailed information about the properties and events of the Microsoft Silverlight RadioButton control at the Silverlight Control Gallery on MSDN.
See also
Tasks
Carry object properties through to the template