Try it: Customize the Thumb element of a SimpleSlider
.png "This page applies to WPF projects only")
It is easy to customize the appearance of a Thumb control in Microsoft Expression Blend, by using the SimpleSlider control template.
To customize the Thumb element of a SimpleSlider
Draw a SimpleSlider on the artboard in Expression Blend.
Tip
The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library
.png "Cc295006.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.Right-click the slider 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.
Tip
To exit the template-editing mode and return to the scope of your document: click the Scope up button
.png "Cc295006.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.
Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit a Copy.
By default, the Thumb template contains a Grid that has an Ellipse. Delete the Ellipse element.
Double-click the Grid element under Objects and Timeline so that you can add child elements to it.
Draw a path into the Grid element by using the Pen tool
.png "Cc295006.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png")
in the Toolbox. You can modify the path by using the Direct Selection tool .png "Cc295006.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png")
to adjust points on the path.Tip
To zoom in on the artboard, you can use the Zoom text box
.png "Cc295006.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.Tip
As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import from Microsoft Expression Design 2, or an image file that you add to your project.
Test your application (F5) to see the effects.