SurfaceScrollBar Control

With a SurfaceScrollBar control, a user can move to a particular portion of a list, display, or other viewing area. The SurfaceScrollBar control is typically reserved for viewport control, with the size of the thumb representing the proportion that the current viewport is of the overall viewable region.

SurfaceScrollBar enables users to have precise control over the current viewport. It also serves as an information display, showing users how large the overall area is, how large the viewport is as a fraction of that area, and where the viewport currently lies in the overall area.

SurfaceScrollBar - Example

An example SurfaceScrollBar control

Proper Usage

A SurfaceScrollBar control is similar to a SurfaceSlider control because it selects a particular value of a continuous parameter. Unlike a SurfaceSlider control, SurfaceScrollBar is reserved for a particular usage scenario: control of a viewport.

Detailed Description

SurfaceScrollBar controls are intended to select the position of a viewport. They differ from SurfaceSlider controls in that the relative size of the viewport is visualized in the size of the scroll bar's thumb. Unlike many other controls, the effect of scroll bars is typically carried out while a user is still touching the thumb. This design provides a quick feedback loop, without the need to stop and evaluate between value adjustments.

If it is enabled, inertia enables users to apply a velocity to the thumb, which continues after a fast movement until friction stops it.

There are five states of a SurfaceScrollBar control, which you can easily assign different visual designs. The following table describes the states of SurfaceScrollBar and shows the default visual design in the Microsoft Surface SDK.


State Description Default visual design


The default state for a SurfaceScrollBar control. A user is not in contact with the thumb, but it is available for input.

The visual design for this state includes:

  • A small thumb that is within the bar.

SurfaceScrollBar - Enabled


The SurfaceScrollBar control is not available for input. If a user contacts the SurfaceScrollBar control, no action is taken.

The visual design for this state includes:

  • Lighter track (grayed out).

  • Darker thumb (grayed out).

SurfaceScrollBar - Disabled state


A user touched the thumb and then dragged away from the thumb. The thumb tracks with a change that is equal to the movement vector of the finger projected onto the line segment of the track. Unlike other controls, a user can continue to adjust the SurfaceScrollBar control in this state.

The visual design for this state includes:

  • A growing thumb.


Thumb Pressed

A user contacted the thumb. This state is functionally the same as the state.

The visual design for this state includes:

  • A growing thumb.


Track Pressed

A user initiated contact on the track area of the SurfaceScrollBar control. Typically, do not use this state to cause the thumb to jump to the point of contact.

The visual design for this state includes:

  • A growing thumb.


Multitouch Behavior

When users are interacting with a SurfaceScrollBar control, multiple inputs are accepted. SurfaceScrollBar controls consist of two different targets for contacts: the thumb and the track. When both targets respond to multitouch input, complicated multitouch behavior can occur. In particular, both the track and thumb can be in their pressed states simultaneously.


The state of the SurfaceScrollBar control changes from the default state to the thumb pressed when the first contact touches the thumb. When subsequent contacts are added to the thumb, no additional action is initiated. If more than one contact has landed on the thumb, the average movement of those contacts is sent to the SurfaceScrollBar control. Release is initiated when the last captured input is been removed from the control while still inside the control.

If a contact is added to the track after a contact has captured the thumb, the track then enters the pressed state. This contact does not change the position of the thumb.


When a contact is added to the track, the track's state changes from the default state to the pressed state. As long as the thumb is not in the pressed state, it moves toward the contact. Each additional contact that is added to the track overrides the previous one, and the thumb starts moving towards the most recently added contact. However, if the thumb is in the pressed state, the contacts on the track have no influence on its position.


You can customize all visual elements of SurfaceScrollBar controls, including its shape, its colors, the visual appearance of each of the states, the appearance and behavior of the track and the thumb, and its transition animations.

You can create other designs that are not visually similar to the SurfaceScrollBar in the Microsoft Surface SDK, but your designs must continue to afford touch.

Design Recommendations

If you use SurfaceScrollBar, we recommend that you adhere to the following guidelines:

  • Design compact, subtle SurfaceScrollBar controls but keep them touchable. Ensure that hit states for thumbs are not less than 38 pixels wide. The thumbs should be at least this size when users press them, but they can appear visually as small as 7 pixels wide in their enabled (but not pressed) state.

  • Ensure that the scroll thumb and the scroll track are contrasted. Because their default sizes are small, contrast is important so users can recognize that they are SurfaceScrollBar controls.

  • If you pair a SurfaceScrollBar control with a SurfaceListBox control, let the SurfaceListBox take prominence and lead the interaction. Use motion design to lead a user's eye (for example, animate a SurfaceListBox control into place when it instantiates), and give users strong clues about how it can be interacted with. In such circumstances, the SurfaceListBox control should be the user's primary control, and the SurfaceScrollBar control should be relegated to showing the user's current position within the total list of options.

  • Design for the grow-upon-touch paradigm. Ensure that sliders and thumbs have larger states that are visible below a user's finger. SurfaceScrollBar thumbs could simply scale in size or have auras around them, but their active states must be visually clear. Be sure that the enlarged state is consistent with the rest of the SurfaceScrollBar design and the broader design vocabulary of the experience.

  • Use SurfaceScrollBar controls only when the content in the list is likely longer than three times the visible area of the list. If the list's content can be shown in three or fewer pages, use the direct manipulation technique of panning the list.

  • Do not use SurfaceScrollBar controls on the entire window. We recommend that you do not use SurfaceScrollBar controls when content runs outside of a view area on multiple axes.

Alternate Designs

The wide array of alternative design visuals for Microsoft Surface SDK controls means that you can achieve many visual designs with SurfaceScrollBar controls. In general, we recommend that you do not use SurfaceScrollBar controls for many Microsoft Surface experience.

In many situations, you can simply omit the SurfaceScrollBar controls. Instead of requiring users to touch an area offset from the current viewport, enable users to drag content within the viewport directly to change the view. Such an approach does have three fundamental limitations:

  • It omits the information display portion of the SurfaceScrollBar control, depriving the user of a valuable piece of information.

  • It requires users to occlude their content while they are scrolling.

  • It limits the scope of a particular movement to the size of the viewport.

Given the limitations, it is not always easy to omit SurfaceScrollBar controls from your application. Consider the tradeoffs carefully and provide design elements to overcome those shortcomings, which are important limitations.

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.