Try it: Customize the look of a SimpleScrollBar
.png "This page applies to WPF projects only")
It is easy to customize the appearance of a scroll bar in Microsoft Expression Blend by using the SimpleScrollBar control template.
To customize the look of a SimpleScrollBar style
Draw a SimpleScrollBar object on the artboard in Expression Blend.
Tip
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.
Right-click the scroll bar 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.
Tip
To exit template-editing mode and return to the scope of your document, click Return scope to
.png "Cc294792.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
, which is above the object 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.
In the Objects and Timeline panel, click the IncreaseRepeat object and set the Alpha attribute (identified by an A on the right side of the color palette) of the Background and BorderBrush properties to 0 percent under Brushes in the Properties panel.
In the Objects and Timeline panel, click the IncreaseArrow path object and then set the Stroke and Fill properties to a white Solid color brush
.png "Cc294792.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.30).png")
. For the Stroke property, you will first have to remove the binding by clicking Advanced property options.png "Cc294792.12e06962-5d8a-480d-a837-e06b84c545bb(en-us,Expression.30).png")
and then clicking Reset.Right-click the IncreaseRepeat object in the Objects and Timeline panel, point to Edit Template, and then do one of the following:
If you selected Edit Current in step 2, click Edit Current now to edit the SimpleRepeatButton control template that is stored in SimpleStyles.xaml.
If you selected Edit a Copy in step 2, click Edit a Copy now to create a copy of the SimpleRepeatButton control template and store it in the same place as the template for the SimpleScrollBar style.
In the editing scope of the SimpleRepeatButton style, delete the event triggers named IsMouseOver = True and IsPressed = True in the Triggers panel by selecting each trigger and then clicking Delete trigger
.png "Cc294792.d31907a6-867b-4e16-b860-f07c9531fbd7(en-us,Expression.30).png")
.Return to the editing scope of the SimpleScrollBar template by doing one of the following:
If you are editing the Simple Styles.xaml document because you chose Edit Template in step 5, click the tab for your main document (for example, the Window1.xaml tab) at the top of the artboard. Right-click your ScrollBar object, point to Edit Template, and then click Edit Current to return to the ScrollBar template you were editing before.
If you are editing your main document, click Return scope to
.
Repeat the previous step for the DecreaseRepeat object.
Activate the GridRoot object by clicking it in the Objects and Timeline panel. Click the Border control in the Tools panel, and then draw a Border object inside the GridRoot object. Auto-size the new Border object by right-clicking it in the Objects and Timeline panel, pointing to Auto Size, and then clicking Fill.
With the new Border object still selected in the Objects and Timeline panel, change the CornerRadius property under Appearance in the Properties panel to 4,4,4,4. This will round the corners of the border.
Right-click the [Thumb] object in the Objects and Timeline panel, point to Edit Template, and then click Edit a Copy. In the editing scope of the SimpleThumbStyle style, click the Rectangle object, and then change the Fill property to a dark gray Solid color brush
, and set the left and right Margin properties to 2.Test your application (F5) to see the effects.