ScrollBar control styling tips

Article
10/10/2017

Ee341375.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png

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

Ee341375.3a7948bb-14c7-46cd-8098-11ee8579802d(en-us,Expression.30).png

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.

Tip

To view the parts of the template, open the Parts panel while modifying the template.

Ee341375.ea64f295-e640-448b-a3ef-c28ae681e977(en-us,Expression.30).png

Part name	Object type
VerticalRoot HorizontalRoot	FrameworkElement
VerticalSmallDecrease HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease HorizontalLargeDecrease	RepeatButton
VerticalThumb HorizontalThumb	Thumb
VerticalLargeIncrease HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease HorizontalSmallIncrease	RepeatButton

ScrollBar tips

Root part

This part is mandatory. The Root part contains all of 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.

Ee341375.b6e16f2c-0ce1-4bc1-919f-e135448a6bd9(en-us,Expression.30).png

Thumb part

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

To make the object(s) representing 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 on 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) 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:

State name	Description
Normal	The appearance of the ScrollBar control when there is no interaction with the control.
MouseOver	The appearance of the ScrollBar control when the user moves the pointer over it.
Disabled	The appearance of the ScrollBar control when the IsEnabled property is set to False.

Tip

To view the available states, open the States panel when modifying a ScrollBar template.

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 recording button Ee341375.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).png , or select Base in the States panel.

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

Template Binding

You can try template-binding 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 comp of a scroll bar created by a designer that includes MouseOver and Pressed states of the VerticalThumb, VerticalSmallDecrease, and VerticalSmallIncrease parts.

Ee341375.873f8603-ab77-4c3c-bc3e-f0c24c685640(en-us,Expression.30).png

This example uses the following XAML code, which corresponds to the preceding graphic to create a custom scroll bar by using the ScrollBar control template.

Tip

Click Split View to see the changes in both Design view and Code view as you follow this procedure.

Open a new Microsoft Silverlight 3 project. In Code view, locate and then delete the following code: <Grid x:Name="LayoutRoot" Background="White"/>.Copy and then paste the following code into your new project, replacing the code that you just deleted.

<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="M196.89876,311.82065 L204.06047,311.82065 L200.42426,304.87872 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="M196.89876,304.83246 L200.52762,312.02783 L204.07646,304.83078 z" Margin="0,0,0,5" VerticalAlignment="Bottom" />
</Grid>

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 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, 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.
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.
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-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.
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.
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.
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.
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.
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.
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 5 through 10 for the smallincrease element.
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.
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.
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.
Go back to ScrollBarStyle1 (ScrollBar Template) by clicking Return scope to in the Objects and Timeline panel. In the Objects and Timeline panel, click Vertical Root. In the Parts panel, double-click VerticalLargeDecrease to create that part and to make it a child of Vertical Root. In the Properties panel, set the Row to 1 and the Opacity to 0.
In the Objects and Timeline panel, click Vertical Root. In the Parts panel, double-click VerticalLargeIncrease to create that part and to make it a child of Vertical Root. In the Properties panel, set the Row to 3 and the Opacity to 0.
For rows 0, 1, 2, and 4, click the Star icon twice until the Auto icon appears. For row 3, ensure 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, in the Properties panel, click Show advanced properties. To the right of the MinHeight value, click Advanced property options, and then click Reset.
In the Objects and Timeline panel, click Vertical Root. In the States panel, click Disabled. In the Properties panel, set Opacity to 50.
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.