Guidelines for scroll bars

Applies to Windows and Windows Phone

A sample of what standard scroll bar and panning indicator controls look like

Description

Panning and scrolling allows users to reach content that extends beyond the bounds of the screen.

A scroll viewer control is composed of as much content as will fit in the viewport, and either one or two scroll bars. Touch gestures can be used to pan and zoom (the scroll bars fade in only during manipulation), and the pointer can be used to scroll. The flick gesture pans with inertia.

  • Applies to Windows

Windows: There are two panning display modes based on the input device detected: panning indicators for touch; and scroll bars for other input devices including mouse, touchpad, keyboard, and stylus.

Example

A screenshot that illustrates the standard scrollbar control

Dos and don'ts

  • Display panning indicators and scroll bars to provide location and size cues. Hide them if you provide a custom navigation feature.
  • Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal). Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).
  • Use the built-in scroll functionality in the list box, drop-down list, text input box, grid view, list view, and hub controls. With those controls, if there are too many items to show all at once, the user is able to scroll either horizontally or vertically over the list of items.
  • If you want the user to pan in both directions around a larger area, and possibly to zoom, too, for example, if you want to allow the user to pan and zoom over a full-sized image (rather than an image sized to fit the screen) then place the image inside a scroll viewer.
  • If the user will scroll through a long passage of text, configure the scroll viewer to scroll vertically only.
  • Use a scroll viewer to contain one object only. Note that the one object can be a layout panel, in turn containing any number of objects of its own.

Related topics

For designers
Guidelines for panning
For developers (HTML)
Touch: Zooming and Panning
For developers (XAML)
ScrollViewer class
ScrollBar class
Quickstart: Screen orientation for Windows Phone

 

 

Show:
© 2014 Microsoft