CheckBox control styling tips
.png "Ee371151.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The CheckBox 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 CheckBox control can be modified to look very different from its default appearance. By default, the CheckBox control looks like the following:
.png "Ee371151.1b2a1e45-ffdd-4ac8-941a-d6625b797fd0(en-us,Expression.30).png")
CheckBox control properties of interest
The CheckBox control is a content control, so you can display text in the CheckBox 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 CheckBox control.
You can also set the IsChecked property to display the CheckBox control in the Checked state, and set the IsThreeState property to enable the CheckBox control to use the Indeterminate state in addition to the Checked and Unchecked states.
The checked states of a CheckBox control that uses the default system template
.png "Ee371151.df888d99-f032-4084-a93e-3de14ad1c19c(en-us,Expression.30).png")
You can set these properties in the following ways:
Set the properties of the object After you draw a CheckBox object on the artboard, you can set the properties of the object directly. If you want several CheckBox controls to use the same values, set these properties in a style.
Set the properties in a style If you set these properties in the style
.png "Ee371151.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of a CheckBox object, any CheckBox 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 CheckBox 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 CheckBox control is clicked, drag a behavior onto a CheckBox object or onto an object in the CheckBox 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 CheckBox template
The CheckBox control has no parts.
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 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. |
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 "Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).png")
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.
To convert objects into a CheckBox control
Because the CheckBox control has no parts, you can convert any objects into a CheckBox 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 CheckBox, 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, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your CheckBox control.
If the group of original objects included a TextBlock object
.png "Ee371151.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png")
object, the TextBlock object is converted to a ContentPresenter object .png "Ee371151.51a0c06c-d801-4133-8caf-cf1856a8dfc4(en-us,Expression.30).png")
in the CheckBox control template. This enables your CheckBox object to display text. If your original objects did not include a TextBlock object, a ContentPresenter object is automatically added to the template. If you don't need to display the text in the Content property of the CheckBox object to which this template will be applied, you can delete the ContentPresenter object.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 CheckBox 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 [CheckBox] in the breadcrumb bar at the top of the artboard, or click Return scope to
.png "Ee371151.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel.
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.