RadioButton control styling tips

Article
02/19/2013

JJ170621.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.110).png

You can use the built-in RadioButton control template to create a custom RadioButton template. By default, the RadioButton control looks like the following:

JJ170621.a79fb949-5f67-4c15-afd5-5f28abd2ae07(fr-fr,VS.110).png

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.

The RadioButton control can be in one of the following three states of the ValidationStates state group:

State name	Description
Valid	The appearance of the RadioButton control when it is valid.
InvalidUnfocused	The appearance of the RadioButton control when it is invalid and does not have keyboard focus.
InvalidFocused	The appearance of the RadioButton control when it is invalid and has keyboard focus.

Conseil
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.

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 JJ170621.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.110).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.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, BorderThickness, or Padding properties. For more information, see Carry object properties through to the template.

To convert objects into a RadioButton control

The following images are a design comprehensive (comp) of a radio button that includes Normal, MouseOver, Pressed, Disabled, and Focused states:

Normal

RadioButton à l'état Normal

MouseOver

RadioButton à l'état MouseOver

Pressed

RadioButton à l'état Enfoncé

Disabled

RadioButton à l'état Désactivé

Focused

RadioButton à l'état Actif

[!REMARQUE]

It is important to note that the preceding graphics are not yet RadioButton controls, but artwork that that can be converted into RadioButton controls.

This example uses the XAML code in step 4 of the following procedure.

Open a new Microsoft Silverlight project. In the Brushes category, click Solid color brush. In the Editor, in the Hex value box, type #FF808080.
Double-click **Grid ** in the Tools panel to create a new container on the artboard. In the Properties panel, in the Layout category, to the right of Width, click Advanced options, and then click Reset. Repeat for Height.
In Code view, locate the following code, and then delete the closing slash (/).
```
<Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
```

Copy and then paste the following code into your new project, after the code that you located in step 3.

<Grid>
   <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
   <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
   <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
</Grid>

Add a closing Grid tag (</Grid>) after the code that you just pasted.
In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click RadioButton, and then click OK.

In Code view, note that the code that you pasted in the preceding step has been replaced with the code for a new RadioButton. In addition, Blend turned Grid into a template for a new RadioButton style and applied that template to Grid.

The TextBlock in the original grid had a white foreground, so the new RadioButton style has a white foreground, too. The text of the TextBlock element was Lorem, so that becomes the Content property of the new RadioButton. In the template, the TextBlock has been replaced with a ContentPresenter that has the same layout properties as the TextBlock.
To add a MouseOver state to the RadioButton, do the following:
1. In the Objects and Timeline panel, click Ellipse.
2. In the States panel, click MouseOver.
3. In the Properties panel, in the Brushes category, click Fill, and in the Editor category, set Alpha to 25.
4. Return to the States panel, and then click Base to end state recording.
[!REMARQUE]

You can also end state recording by clicking the Record mode indicator in the upper-left corner of the document window.
Right-click MouseOver in the States panel, click Copy State To, and then click Pressed.
To create the offset, with the Pressed state selected in the States panel, select Grid in the Objects and Timeline panel. In the Transform category in the Properties panel, set X and Y to 1. Click Base to end state recording. Note that Grid is now named grid.
In the States panel, click Disabled. In the Appearance category of the Properties panel, set Opacity to 50. Click Base to end state recording.
In the States panel, click Normal. Click Add transition, and then click Normal to MouseOver. Set Transition duration to .2. Click Base to end state recording.
In the Objects and Timeline panel, click bullet. In the Appearance category of the Properties panel, set Opacity to 0.
In the States panel, click Checked. In the Appearance category of the Properties panel, set Opacity to 100. Click Base to end state recording.
The design comp includes a blue rectangle around the button when the radio button is in the Focused state. To create the rectangle, add a new Rectangle object with the Focused state selected. This is called "drawing into state," meaning that the new object is visible only in the state into which you drew the object. To create the rectangle in the Focused state, in the States panel, click Focused, and then double-click the Rectangle tool in the Tools pane to create the new Rectangle object.
The next step is to set the properties of the new rectangle. The properties have to be changed in the Base state, not in the Focused state. However, the rectangle is currently transparent, and won't be visible in the Base state. Click the recording button to maintain the rectangle's visibility. Note that the new rectangle (rectangle) is still selected in the Objects and Timeline panel. In the Properties panel, set the following properties for rectangle:
- Fill In the Brushes category, click No brush.
- Stroke In the Brushes category, click Solid color brush. In the Editor, set the color to #FF00C0FF.
- RadiusX In the Appearance category, set RadiusX to 2.
- RadiusY In the Appearance category, set RadiusY to 2.
- Margin In the Layout category, set Margin to the following:
  - Left -2
  - Right -2
  - Top 0
  - Bottom 0
Click **Return scope to **. With RadioButton selected in the Objects and Timeline panel, press Ctrl+C to copy it. Press Ctrl+V four times to paste four more RadioButton controls into the container. Use the Selection tool to arrange the check boxes into a column. With one of the RadioButton objects selected in the Objects and Timeline panel, clear the IsEnabled box in the Common Properties category in the Properties panel.
Build your project (Ctrl+Shift+B), and then test your project by pressing F5.