ScrollBar control styling tips

You can use the built-in ScrollBar control template to create a custom ScrollBar template. By default, the ScrollBar control template looks like the following:

Parts of the ScrollBar template

The ScrollBar template includes two sets of parts: one set for a vertical scroll bar, and one set for a horizontal scroll bar. The part names are prefixed by the word "vertical" or "horizontal," depending on the orientation of the scroll bar.

ScrollBar tips

Root part

This part is mandatory. The Root part contains all the elements that make up the ScrollBar in a particular orientation.

To make a Root part, create a grid named HorizontalRoot or VerticalRoot that contains five columns (for horizontal orientation) or rows (for vertical orientation) sized Auto, Auto, Auto, Star, Auto.

Thumb part

This part is mandatory. The thumb is the moveable element in the scrollbar.

To make the object or objects that represent the thumb into a Thumb control (HorizontalThumb or VerticalThumb), place the Thumb part in the middle column/row of the Root part, and set the Width and Height properties of the Thumb part so that the column (or row) will be resized to fit the thumb.

Do not set the Margin properties for the thumb. To get the same effect, set the margins of the root object of the Thumb template.

Track

The space in which the thumb moves is called the track. The track is not a part and is optional.

To include a track, place the object(s) representing the track into the Root part, either spanning all five columns (or rows) or spanning the middle three columns (or rows).

To make an object span multiple columns (or rows), select the object, and then set the ColumnSpan or RowSpan property in the Properties panel.

Moving the thumb along the track in large increments

If you want the user to be able to click the track on either side of the thumb to move the thumb in large increments, place a RepeatButton control in the two columns (or rows) on either side of the Thumb part and name them VerticalLargeDecrease and VerticalLargeIncrease (or HorizontalLargeDecrease and HorizontalLargeIncrease). So that the RepeatButtons function but are not seen, give them zero Opacity. Alternatively, apply a template that contains a single object with zero Opacity to the RepeatButton controls.

Moving the thumb along the track in small increments

If you want the user to be able to click a button at either end of the track to move the thumb in small increments, make the objects representing these buttons into RepeatButton controls and name them VerticalSmallDecrease and VerticalSmallIncrease (or HorizontalSmallDecrease and HorizontalSmallIncrease). Place them in the two end columns (or rows).

States of the ScrollBar control

You can also use states with the ScrollBar control template. By default, the ScrollBar control can be in one of the following three states in the CommonStates state group:

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the Record mode indicator , or select Base in the States panel.

For more information, see Defining different visual states for a control.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, BorderThickness, or Padding properties. For more information, see Carry object properties through to the template.

To convert objects into a ScrollBar control

The following image is a design comprehensive (comp) of a scroll bar that includes MouseOver and Pressed states of the VerticalThumb, VerticalSmallDecrease, and VerticalSmallIncrease parts.

Normal

MouseOver

Pressed

Disabled

This example uses the XAML code in step 1 of the following procedure, which corresponds to the preceding graphics to create a custom scroll bar by using the ScrollBar control template.

1. Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copy and then paste the following code into your new project, after the code that you located in step 1.

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

4. In the Objects and Timeline panel, right-click verticalscrollbar, and then click Make Into Control. In the Make Into Control dialog box, click ScrollBar, and then click OK.

   In Code view, note that the code that you pasted in the preceding step has been replaced with the code for a new ScrollBar control (locate the code beginning with <Grid x:Name="verticalscrollbar">). In addition, Microsoft Expression Blend turned verticalscrollbar into a template for a new ScrollBar style and applied that template to verticalscrollbar (locate <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">).

   Tip

   In the Objects and Timeline panel, note that UserControl has been replaced by Template.

5. To make verticalscrollbar into the root of the template, in the Objects and Timeline panel, right-click verticalscrollbar, then click Make Into Part of ScrollBar, and then click VerticalRoot. Note that verticalscrollbar has been renamed VerticalRoot.

6. To add rows to the Root part grid, in Design view, click the blue ruler to the left of the control to add new rows as illustrated in the following graphic:

   

   If you add the rows as shown, the parts will be in the correct rows. Track has a RowSpan of 5, smalldecrease is in Row 0, thumb is in Row 2, and smallincrease is in Row 4.

   Note

   Numbering begins at 0, so the 5 rows are numbered 0 through 4.

   You now have to define the elements of the artwork as parts of the template. As you define the elements, you can also assign values to specific properties.

7. In the Objects and Timeline panel, right-click smalldecrease, click Make Into Part of ScrollBar, and then click VerticalSmallDecrease. In the Make Into Part dialog box, click OK.

   The smalldecrease element has just been made into a type of RepeatButton that is the VerticalSmallDecrease part of the ScrollBar control template.

8. By default, Expression Blend creates a ContentPresenter for the part. In this example, you won't use the ContentPresenter, so you can delete it by right-clicking ContentPresenter in the Objects and Timeline panel, and then clicking Delete.

9. To set the properties for the VerticalSmallDecrease part, in the Objects and Timeline panel, click smalldecrease, and then open the Properties panel. In the Layout category, set the Width and the Height to 7.

10. To add states to the VerticalSmallDecrease part, in the States panel, click MouseOver. In the Properties panel, set the Fill to #FFCCCCCC. Return to the States panel, and then click Base to end state recording.

    Note

    You can also end state recording by clicking the Record mode indicator  in the upper-left corner of the document window.

    In the States panel, click Pressed. In the Properties panel, set the Fill to #FFE5E5E5. Return to the States panel, and then click Base.

    In the States panel, click Normal, click Add Transition, and then click Normal to MouseOver. In the Transition Duration box, type .2, and then click Base.

11. In the Objects and Timeline panel, click Grid. In the Brushes category in the Properties panel, click Solid Color Brush , and then set the Alpha property to 1.

12. Go back to template-editing mode for the ScrollBar control [ScrollBarStyle1 (ScrollBar Template)] by clicking Return scope to  in the Objects and Timeline panel, or by clicking VerticalSmallDecrease in the breadcrumb bar at the top of the artboard.

    Repeat steps 7 through 12 for the smallincrease element.

13. To define the thumb as part of the template, in the Objects and Timeline panel, right-click thumb, click Make Into Part of ScrollBar, and then click Vertical Thumb. In the Make Into Part dialog box, click OK.

14. To set the properties for the VerticalThumb part, go back to template-editing mode for the ScrollBar control [ScrollBarStyle1 (ScrollBar Template)] by clicking Return scope to , and then, in the Objects and Timeline panel, click VerticalThumb. In the Properties panel, in the Layout category, set the Width and the Height to 7. Set the Margin values as follows:

    • Left: 5

    • Right: 5

    • Top: 0

    • Bottom: 0

    Click Advanced Properties, and then set MinHeight to 7. This assigns a minimum height value to the thumb so that it is always visible.

15. To add states to the thumb part, return to the Thumb template [ThumbStyle1(ThumbTemplate)] by clicking thumb in the breadcrumb bar at the top of the artboard. In the States panel, click MouseOver. In the Properties panel, set the Fill to #FFCCCCCC. Return to the States panel, and then click Base.

    In the States panel, click Pressed. In the Properties panel, set the Fill to #FFE5E5E5. Return to the States panel, and then click Base.

    In the States panel, click Normal, click Add Transition, and then click Normal to MouseOver. In the Transition Duration box, type .2, and then click Base.

16. Go back to ScrollBarStyle1 (ScrollBar Template) by clicking Return scope to  in the Objects and Timeline panel. In the Objects and Timeline panel, click VerticalRoot. In the Parts panel, double-click VerticalLargeDecrease to create that part and to make it a child of VerticalRoot. In the Properties panel, set the Row to 1 and the Opacity to 0.

17. In the Objects and Timeline panel, click VerticalRoot. In the Parts panel, double-click VerticalLargeIncrease to create that part and to make it a child of VerticalRoot. In the Properties panel, set the Row to 3 and the Opacity to 0.

18. For rows 0, 1, 2, and 4, click the Star icon  twice until the Auto icon  appears. For row 3, make sure that the Star icon appears. This sets the heights of the rows as follows: Auto, Auto, Auto, Star, and Auto. Click each of the Auto-sized row dividers, and then, in the Properties panel, click Show advanced properties. To the right of the MinHeight value, click Advanced options, and then click Reset.

    

19. In the Objects and Timeline panel, click VerticalRoot. In the States panel, click Disabled. In the Properties panel, set Opacity to 50.

20. Build your project by clicking CTRL+SHIFT+B. When the build is complete, run your project by clicking F5, and then test your scroll bar.

References

You can find detailed information about the properties and events of the Silverlight ScrollBar control at the Silverlight Control Gallery  on MSDN.

See also

Tasks

Bind an object to user input or to other internal values

Concepts

Styling tips for common Silverlight controls
SimpleScrollBar
Styling a control that supports templates

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.