Simple styles > Customize the look of a SimpleScrollBar

Customize the look of a SimpleScrollBar

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

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

   The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library . After you select a simple style control from the list, you can draw it on the artboard.

2. Right-click the scroll bar 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.

   To exit the template-editing mode and return to the scope of your document: click the Scope up button , 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. Under Objects and Timeline, click the IncreaseRepeat element 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.
4. Under Objects and Timeline, click the IncreaseArrow path element and then set the Stroke and Fill properties to a white Solid color brush . For the Stroke property, you will first need to remove the binding by clicking the Advanced property options button and then clicking Reset.
5. Right-click the IncreaseRepeat element under Objects and Timeline, point to Edit Control Parts (Template), and then do one of the following:
   • If you selected Edit Template in step 2, click Edit Template 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 ScrollBar.
6. In the editing scope of the SimpleRepeatButton, delete the event triggers named IsMouseOver = True and IsPressed = True under Triggers in the Interaction panel by selecting each trigger and then clicking the Delete trigger button.
   
7. Return to the editing scope of the SimpleScrollBar template by doing one of the following things:
   • 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 element, point to Edit Control Parts (Template), and then click Edit Template to return to the ScrollBar template you were editing before.
   • If you are editing your main document, click the Scope up button .
8. Repeat the previous step for the DecreaseRepeat element.
9. Activate the GridRoot element by double-clicking it under Objects and Timeline, then click the Border control on the Toolbox, and then draw a Border inside the GridRoot. Auto-size the new Border element by right-clicking it under Objects and Timeline, pointing to Auto Size, and then clicking Fill.
10. With the new Border element still selected under Objects and Timeline, change the CornerRadius property under Appearance in the Properties panel to 4,4,4,4. This will round the corners of the border.
11. Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit a Copy. In the editing scope of the ScrollBarStyle, click the Rectangle element, and then change the Fill property to a dark gray Solid color brush , and set the left and right Margin properties to 2.
12. Test your application (F5) to see the effects.