Condividi tramite

Try it: Customize the Thumb element of a SimpleSlider

  • Articolo

Questa pagina si applica solo ai progetti WPF

It is easy to customize the appearance of a Thumb control in Blend for Visual Studio 2012, by using the SimpleSlider control template.

To customize the Thumb element of a SimpleSlider

  1. Draw a SimpleSlider on the artboard in Blend.

    SuggerimentoSuggerimento

    The simple style controls are available under Simple Styles in the Styles category of the Assets panel. After you select a simple style control from the list, you can draw it on the artboard.

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

    SuggerimentoSuggerimento

    To exit the template-editing mode and return to the scope of your document: click Return scope toJJ170035.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(it-it,VS.110).png, which is above the element tree in the Objects and Timeline panel.

    To return to template editing mode for an existing template: in the Objects and Timeline panel, right-click the object whose template you want to edit, point to Edit Template, and then click Edit Current.

  3. Right-click the [Thumb] object in the Objects and Timeline panel, point to Edit Template, and then click Edit a Copy.

  4. By default, the Thumb template contains a Grid that has an Ellipse. Delete the Ellipse object.

  5. Double-click the Grid object in the Objects and Timeline panel so that you can add child objects to it.

  6. Draw a path into the Grid object by using the Pen tool JJ170035.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(it-it,VS.110).png in the Tools panel. You can modify the path by using the Direct Selection tool JJ170035.6dd6571f-c116-451d-8dd2-1f88b8406362(it-it,VS.110).png to adjust points on the path.

    SuggerimentoSuggerimento

    To zoom in on the artboard, you can use the Zoom text box JJ170035.12524287-c48b-4cfc-b614-01951207239d(it-it,VS.110).png at the bottom of the artboard, or you can use the scroll button on your mouse while holding down the Ctrl key.
    SuggerimentoSuggerimento

    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, or an image file that you add to your project.

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

Vedere anche

Concetti

SimpleSlider