LongListSelector control design guidelines for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

The new LongListSelector control in Windows Phone 8 gives app users the ability to jump directly to a spot within a list instead of scrolling through the list to find the item they want. By using this control in your app, you can help users parse large amounts of data more efficiently, and you can more easily work longer lists of data into your app’s design.

LongListSelector control

This topic contains the following sections.

Appearance and action

Like the ListBox control, the LongListSelector control presents a fixed-sized scrolling selector of items in a list. A user can pan or flick vertically to scroll through items in the list. The user taps the control to select an item in the list.

However, when the user pans through a list, the panning stops at the point in the list where the user’s finger stops moving, or when the user lifts their finger from the phone screen. When the user flicks on the list, the list scrolls and then slows to a stop unless the user taps in the list, in which case, the scrolling—the effect of the flick gesture—stops. However, if scrolling slows to a specified speed, the tap gesture instead selects an item in the list instead of only stopping the scrolling action.

While the list is scrolling, the page can’t be pivoted left or right unless the scroll has slowed down to a certain speed.

When the end of the list is reached, it will then scroll up to display the empty section and “rubber band” back to rest in place. Flicking at the end of the list causes it to rubber band back; the list won’t wrap to the beginning. However, panning can wrap the list back to the beginning if you want to design this ability in your app.

Standard use

You use a LongListSelector control to conserve screen real estate when you want to present a long list of words, numbers, or visual elements from which the user is expected to choose. With the LongListSelector control, the user efficiently selects and then “jumps to” the list item they want.

Choosing the right control

Use a LongListSelector control when the user needs to choose from eight or more items in a list. If the list has four or fewer items, use grouped RadioButton controls instead of a LongListSelector control.

A LongListSelector control organizes a list of items vertically. If you want to present list items horizontally, particularly if the items are graphics or photos, consider instead using the ScrollViewer control.

The long list navigation experience

You have two options for setting up long-list navigation in your app:

  • Alphabetical list. Letters with no items listed are grayed out.

  • Group headers. When a user taps on a group header they activate the Quick Jump List. Your app must provide a list of group headers for this function to work. You’ll need to configure your app’s data source to be grouped in the categories you want for the Long List Navigation to display. If you use group headers in your app and a section is empty, that section will appear as grayed out.

Group Header Navigation: 1) User taps the group header on the list that has enabled Long List Navigation. 2) User is taken to Quick Jump List. 3) User jumps to the top of the group selected. 4) Long List Navigation based on Group Header will provide a header list.

Design guidelines

Using the LongListSelector control is a clean and active way to present a long list of options, but note that a list can be too long. Consider using a table view for a list that contains more than a few dozen items. Also remember to:

  • Use strong sans-serif typefaces; make list item text at least 12 pixels in height; and be sure that the text is legible from all angles and sizes.

  • Reserve illumination, effects, animations, or other ornamentation for scenarios that use touch feedback or selected states. Items in LongListSelector controls should have a strong visual reaction when users touch them.

See Also

Reference

LongListSelector

Other Resources

How to display data in a grouped list in LongListSelector for Windows Phone 8