Export (0) Print
Expand All

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

This page applies to WPF projects only

It is easy to customize the appearance of a check mark in Microsoft Expression Blend, by using the SimpleCheckBox control template.

  1. Draw a SimpleCheckBox on the artboard in Expression Blend.

    Cc294564.alert_tip(en-us,Expression.10).gifTip:

    The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library Cc294564.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png. After you select a simple style control from the list, you can draw it on the artboard.

  2. Right-click the check box under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy instead of Edit Template, to create a new template and save it in the document. For more information about creating a copy, see Create a resource.

    Cc294564.alert_tip(en-us,Expression.10).gifTip:

    To exit the template-editing mode and return to the scope of your document: click the Scope up button Cc294564.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.10).png, which is above the element tree in the Interaction panel.

    To return to template editing mode for an existing template: under Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.

  3. In the editing scope of the control template, expand all of the nodes under Objects and Timeline. Delete the CheckMark path element.

  4. Double-click the Grid element to make it active, so that you can add child elements.

  5. Draw a path into the Grid element by using the Pen tool Cc294564.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png in the Toolbox. You can modify the path by using the Direct Selection tool Cc294564.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png to adjust points on the path.

    Cc294564.alert_tip(en-us,Expression.10).gifTip:

    To zoom in on the artboard, you can use the Zoom text box Cc294564.12524287-c48b-4cfc-b614-01951207239d(en-us,Expression.10).png at the bottom of the artboard, or you can use the scroll button on your mouse while holding down the CTRL key.

    Cc294564.alert_tip(en-us,Expression.10).gifTip:

    As an alternative to drawing a path element by using the Pen tool, you can use an art resource that is imported from Microsoft Expression Design 2, or an image file that has been added to your project.

  6. When you deleted the CheckMark path element, the trigger that makes it appear and disappear was deleted as well. To recreate the trigger, click IsChecked = False under Triggers in the Interaction panel. Under Objects and Timeline, select the new check mark element, and then under Appearance in the Properties panel, set the Visibility property to Collapsed.

  7. Test your application (F5) to see the effects.

Community Additions

ADD
Show:
© 2014 Microsoft