ScrollViewer control design guidelines for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
A ScrollViewer control contains an array of content that wouldn’t otherwise fit into the intended area. The ScrollViewer control has no user interface of its own. It’s a container that provides scrolling functionality for other UI items.
This topic contains the following sections.
- Appearance and action
- Standard use
- Choosing the right control
- Design guidelines
- Customization
- Related Topics
Appearance and action
A ScrollViewer control is a rectangular area whose contents can scroll to reveal other user interface items, or the remainder of a body of text that stretches longer or wider than a view port. Scroll indicators fade in as the user pans or flicks and fade out after a second at the end of the gesture, but the scroll indicators aren’t user actionable.
Scrolling typically includes inertia.
Standard use
The ScrollViewer control allows users to navigate content that isn’t directly viewable within the frame of the app, such as a long section of text or an array of images.
Interaction with a ScrollViewer control depends on your defined parameters. You can constrain the scrolling to be one-dimensional, horizontal, or vertical, or you can enable two-dimensional orthogonal scrolling (a mix of horizontal and vertical).
Choosing the right control
The ScrollViewer control is related to the ListBox control, in that it presents a user with more content than can fit inside one view. If this list or array is made up of a list of discrete items or options, use a ListBox control. If you’re displaying an array of graphics or a contiguous body of text, use ScrollViewer.
Design guidelines
The goal of a ScrollViewer should be to transcend the actual space constraints of the screen and make the user feel as if they have unlimited space to view content in. Typically, we suggest using clear, concise typography to convey the purpose of a control, but in the case of the ScrollViewer, make sure that content is prominent and leads the interaction. To that end:
Avoid using too many textual labels or written instructions.
Consider animating the contents of a ScrollViewer in a way that shows users how content moves within the control, and how they can manipulate it.
Customization
Customize the visual appearance and behavior of ScrollViewer controls to best suit your app. Keep in mind that the content of ScrollViewer can be almost any type of image or SDK control, and the content determines the look of the ScrollViewer control almost entirely.