SimpleCheckBox

The check box is a content control that acts as a toggle that can have three states: checked, unchecked, and indeterminate. The IsChecked state indicates whether the check box is selected. You can place content in a check box in Microsoft Expression Blend by double-clicking the check box and then drawing an element into it. If you want to place multiple elements into the check box, you need to first add in a layout panel such as a Grid or Canvas. A check box also can display text by default; you can edit the text by right-clicking the check box, and then clicking Edit Text.

The artboard view of a SimpleCheckBox control

Breaking down the control template

The SimpleCheckBox control template consists of the following items:

• A BulletDecorator container, which is used to align the check box against the text. A BulletDecorator takes two children: a bullet, and a content element (such as ContentPresenter). The BulletDecorator is used in other controls (such as the RadioButton) that need to align text against another element.

• The Bullet element, which contains a Grid panel that in turn contains a Path element named CheckMark and a Border element. The Path is used to draw an "x" mark.

• The ContentPresenter, which is used to display the Content property of the check box to which the template is applied. This element must be present to show the content of the check box.

  Objects view: The basic parts (template) of a SimpleCheckBox control

  

Back to top

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleCheckBox template, when the IsChecked property is False, the visibility of the CheckMark path element is changed to Collapsed. In other triggers, you change the background of the Border element by using brush resources.

Back to top

Brushes used

The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleCheckBox template:

• The Background property of the Border element is set by using: the NormalBrush when no trigger is active; the MouseOverBrush when IsMouseOver is True; the PressedBrush when IsPressed is True; and the DisabledBackgroundBrush when is IsEnabled is False.

• The BorderBrush property is set by using: the NormalBorderBrush when no trigger is active; the PressedBorderBrush when IsPressed is True; and the DisabledBorderBrush when IsEnabled is False.

• The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.

• The Stroke property of the CheckMark element uses the GlyphBrush to draw the "x" mark.

Back to top

Best practices and design guidelines

• In general, use a Grid control as the root of your template if you expect an application user interface (UI) designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new elements that are added to the artboard end up as child elements of the layout panel.

• The content of the check box is shown by the ContentPresenter element. ContentPresenter elements automatically bind the template to the Content property of the control to which the template is applied. This element must be present for the check box to show the content from the templated parent.

• In some cases, the control you are working with will not have enough attributes to bind to in the control template. For example, the CheckBox control does not provide an attribute to set the brush for the CheckMark element. In this case, the stroke of the CheckMark is set to a brush so that it is easier to change. You can create a custom class based on the CheckBox control and add more attributes to bind to, or you can bind to one of the existing attributes. For an example of a custom class, see Try it: Create a custom WPF control in this User Guide.

• The Grid element is a fixed size because you hide and show the CheckMark path element. If the Grid element was not a fixed size, the text in the ContentPresenter would move when the check box selection changed. As an alternative to a fixed Grid size and hiding the CheckMark path, you could change the Opacity of the Stroke property on the CheckMark path object to 0.

Back to top

See also

Concepts

Try it: Customize the appearance of the check mark in a SimpleCheckBox