CheckBox control styling tips

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

States of the CheckBox control

By default, the CheckBox 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 CheckBox template:

State name	Description
Normal	The appearance of the CheckBox control when there is no interaction with the control.
MouseOver	The appearance of the CheckBox control when the user moves the pointer over it.
Pressed	The appearance of the CheckBox control when the user clicks it, or when the control has focus and the user presses ENTER or SPACEBAR.
Disabled	The appearance of the CheckBox control when the IsEnabled property is set to False.

The CheckBox control can be in one of the following two states of the FocusStates state group:

State name	Description
Unfocused	The appearance of the CheckBox control when it does not have keyboard focus.
Focused	The appearance of the CheckBox 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 CheckBox control.

The CheckBox control can be in one of the following two states of the ValidationStates state group:

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

The CheckBox control can be in one of the following three states of the CheckStates state group:

State name	Description
Unchecked	The appearance of the CheckBox control when the IsChecked property is set to False.
Checked	The appearance of the CheckBox control when the IsChecked property is set to True.
Indeterminate	The appearance of the CheckBox control when the IsThreeState property is set to True and the IsChecked property is set to Null.

By default, the checked states of a CheckBox control look like the following:

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  on the artboard, 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 CheckBox control

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

Normal

MouseOver

Pressed

Disabled

Focused

Note

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

This example uses the XAML code in step 4 of the following procedure, which corresponds to the Normal state in the preceding graphics.

1. Open a new Microsoft Silverlight project. In the Brushes category, click Solid color brush. In the Editor, in the Hex value box, type #FF808080.

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

3. In Code view, locate the following code, and then delete the closing slash (/).

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

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

   <Grid>
      <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
         Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
         C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
         C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
         C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
         C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
         C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
         C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
         C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
         C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
         C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
         HorizontalAlignment="Left" Margin="2,2,0,2"/>
      <TextBlock 
         Foreground="White" Text="Lorem" Margin="15,0,0,0" 
         VerticalAlignment="Center"/>
   </Grid>
   

5. Add a closing Grid tag (</Grid>) after the code that you just pasted.

6. In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click CheckBox, and then click OK.

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

   The TextBlock in the comp has a white foreground. The TextBlock in the comp also contains the text Lorem. Also, the TextBlock in the preceding code has been replaced with a ContentPresenter with the same properties as the original TextBlock.

7. To add a MouseOver state to the Button control, do the following:

   1. In the Objects and Timeline panel, click Rectangle.

   2. In the States panel, click MouseOver.

   3. In the Properties panel, select Fill and set the Alpha property to 25.

      Note that Rectangle has been renamed to rectangle.

   4. Return to the States panel, and then click Base to end state recording.

8. To apply the same properties to the Pressed state, in the States panel, right-click MouseOver, click Copy State To, and then click Pressed.

9. To offset the CheckBox template when the check box is in the Pressed state, do the following:

   1. In the States panel, click Pressed.

   2. In the Objects and Timeline panel, click Grid.

   3. In the Properties panel, on the Translate tab in the Transform category, set X and Y to 1.

      Note that Grid in the Objects and Timeline panel has been renamed to grid.

   4. Return to the States panel, and then click Base to end state recording.

10. In the States panel, select Disabled. In the Objects and Timeline panel, select grid. In the Properties panel, set Opacity to 50. Return to the States panel, and then click Base to end state recording.

11. To add interactivity to the CheckBox control, do the following:

    1. In the States panel, click Normal, click Add transition, and then click Normal to MouseOver.

    2. In the Transition duration box, type .2.

    3. Click Base to end state recording.

    Now, when you hover the pointer over the CheckBox, the transition from the Normal state to the MouseOver state will take .2 seconds. All other transitions will happen instantly.

12. In the Objects and Timeline panel, click check. In the Properties panel, in the Appearance category, set Opacity to 0. In the States panel, click Checked, and then, in the Properties panel, set Opacity to 100. Click Base to end state recording.

13. The comp includes a light blue rounded rectangle in the Focused state which is not present in the XAML in the Normal 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 only visible 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 panel to create the new Rectangle object.

14. The next step is to set the properties of the new rectangle. The properties have to be changed in Base, not in the Focused state. However, the rectangle is currently transparent, and won't be visible in Base. To maintain the rectangle's visibility, click the ****Record mode indicator ****. Note that the new rectangle (rectangle1) is still selected in the Objects and Timeline panel.

    In the Properties panel, set the following properties for rectangle1:

    • 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

15. Click ****Return scope to ****. With CheckBox selected in the Objects and Timeline panel, press CTRL+C to copy it. Press CTRL+V four times to paste four more CheckBox controls into the container. Use the Selection tool  to arrange the check boxes into a column. With one of the CheckBox objects selected in the Objects and Timeline panel, clear the IsEnabled box in the Common Properties category in the Properties panel.

16. Build your project (CTRL+SHIFT+B), and then test your project by pressing F5.

For information about applying your new CheckBox template to other CheckBox objects, see Apply or remove a resource.

References

You can find detailed information about the properties and events of the Microsoft Silverlight CheckBox control at the Silverlight Control Gallery  on MSDN.

See also

Concepts

Styling tips for common Silverlight controls
SimpleCheckBox
Styling a control that supports templates

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.