Guidelines for list and grid view controls

Applies to Windows and Windows Phone

Example of a grid view and a list view.

Description

A grid view or list view is a collection of content within a Windows Store app. Grid and list views provide a consistent item viewing experience for users and are optimized for touch.

These controls come in multiple formats - ungrouped grid, grouped grid, list (HTML), ungrouped list (XAML), and grouped list (XAML). Lists pan vertically. Grids pan horizontally. The reading order for lists is from top to bottom. Grids read from top to bottom, left to right.

Note  The Windows Library for JavaScript (WinJS) contains a single ListView control with list and grid layout options. Apps using C#/VB/C++ and XAML create list and grid layouts with two separate controls, ListView and GridView. These guidelines apply to all of these control types.

Example

Here is a list of search results displayed in a standard grid view:

Search results for the query "pizza" displayed using grid view

Is this the right control?

Use a list or grid view control to present a collection of data as a series of items to users. For example, you can use a list view to present a list of emails, items in a shopping cart, a list of images, and search results.

Use this control when you want to:

  • Present data in groups
  • Let users select one or more items
  • Customize how your data is loaded
  • Provide better keyboarding and selection
  • Dynamically edit your list of items and get built-in animations
  • Customize your items with templates or give your items their own events
  • Display items of different sizes

List or grid?

The WinJS provides two basic layouts for ListView: a list layout and a grid layout. (You can also create your own custom layouts.) If you use C#/VB/C++ and XAML, you use two separate controls called ListView and GridView to achieve the same functionality.

List: The list layout displays as a single-column, reads from top to bottom, and pans or scrolls vertically. This layout doesn't display group info, such as group headers or group boundaries.

A ListView that uses the list layout

Use a list when:

  • Displaying content in a narrow window or in portrait orientation.
  • Trying to conserve space; list layouts take up less room than grid layouts.
  • Grouping items isn't necessary.
  • Creating the master pane in master/detail view. Master/detail view is the format often used in mail apps where one side of the screen shows a list of selectable items and the other side of the screen provides a detailed view of the selected item. See the following section, Using the right interaction pattern, for an example of this view.

Grid: The grid layout (or GridView in apps using XAML) always pans horizontally, and items are laid out following a top-to-bottom, then left-to-right reading order.

A ListView that uses the grid layout

Use a grid when:

  • Displaying content libraries. See using the right interaction pattern for an example of this view.
  • Your app needs to group items. Grouping helps organize content when the collection of items is large or naturally lends itself to grouping (like a collection of songs organized by album).
  • Formatting the two content views associated with semantic zoom.

Using the right interaction pattern

List or grid view controls are typically used in four different ways: to display a content library, to display master/detail data, as a picker, or to display static data. When you use these controls in one of these ways, users expect it follow these interaction patterns:

  • Content library pattern

    Use this pattern when displaying a collection, or library, of content. It is often used when presenting media such as pictures and videos.

    A content library

    In a content library, users expect to be able to tap an item to invoke an action. Most content libraries also support the selection of items using the cross-slide gesture. Cross-slide lets your user swipe perpendicular to the panning direction to select an item. For example, if you enable cross-slide in your horizontally panning content library, a user will be able to select an item by dragging it vertically.

    If you're using C#/VB/C++ and XAML, add a GridView control formatted with one of these item templates for grid layouts to quickly implement this kind of display.

    If you're using JavaScript and HTML, you can make your ListView follow the content library pattern by configuring it like this:

  • Master/detail pattern (also known as split view pattern)

    When using the master/detail pattern, you can use list view to organize the master pane. The master pane shows a list of selectable items. When a user selects an item in the master pane, additional info about the selected item is displayed in the details pane. LIst view is only useful for formatting a master pane display; use another control for the details pane.

    An email app that uses the master/detail pattern

    The XAML image and text list (inbox) template styles a ListView to display content in the master pane pattern.

    Using HTML? To make your ListView behave like the master pane in the master/detail pattern, configure it like this:

    You can chain several list view controls together to create complex master/detail hierarchies.

  • Picker pattern

    Use the picker pattern when the primary user action is selection and the ability to invoke an item on tap is not important. In this interaction pattern, tap is used for selection in addition to cross-slide.

    A ListView demonstrating the picker pattern

  • Static pattern

    Use this pattern when you want to use the list view solely as a way to present content, and most types of interactivity are disabled. This pattern is useful for collections of items that are read-only and can't be activated or navigated into.

See the code associated with each of these interaction patterns in the HTML ListView customizing interactivity sample or the XAML ListView and GridView customizing interactivity sample.

Dos and don'ts

  • Items in the same list or grid view should have the same behavior. For example, if one item in a list view performs an action when the user taps it, all items in the list view should perform an action when the user taps them.
  • If your list is divided into groups, use semantic zoom (see SemanticZoom (HTML) or SemanticZoom (XAML)). Semantic zoom makes it easier for users to navigate through grouped content.
    • Use the grid layout in the WinJS ListView control or the XAML GridView control to organize the zoomed-in view. This view displays group headers and individual items.

      Zoomed in view of a mutual fund list

    • Also use a grid layout for the zoomed out view. Note that this view only displays group headers.

      Zoomed out view of a mutual fund list

  • When using interactive group headers in grid view, register for the Ctrl + Alt + G key press and use it to navigate the user into the group for the currently focused item.
  • Don't display selection checkmarks when users can only select a single item (when selectionMode is set to "single"). See the HTML ListView customizing interactivity sample or XAML ListView and GridView customizing interactivity sample for examples.
  • Don't use a list or grid views as general purpose layout controls. To create a grid or table-like layout, use a Hub control, Grid control, or a CSS layout, such as grid layout or flexible box ("flexbox") layout. (For more info about CSS layouts, see Choosing a CSS3 layout for your app.)
  • Don’t use a list or grid view control to create command toolbars, such as a toolbar of buttons for cut, copy, and paste commands. Instead, use several button controls laid out side-by-side.

Guidelines specific to WinJS ListView control

  • If your ListView uses a grid layout, switch to a list layout when your app is resized to a narrow width or switch to portrait orientation.
  • If your ListView uses a grid layout and contains groups, display the groups when you switch to a list layout. When the user taps a group, update the ListView to display the items in the group and provide a back button that lets the user go back to the group display. You can use the SemanticZoom control to provide this functionality.
  • Change how the items in the ListView are displayed when your app is resized. You can use Media Queries to update your CSS automatically or you can switch to a different itemTemplate when the app enters the resized view. If you update your CSS styling, you must call the ListView control's forceLayout method for it to display the changes correctly.
  • Store the ListView control's indexOfFirstVisible value before the app is resized, and then restore it when the app returns to full screen so that the user doesn't lose their position in the list.

Related topics

For developers (HTML)
WinJS.UI.ListView object
Quickstart: adding a ListView
Item templates for list layouts
Item templates for grid layouts
For developers (XAML)
ListView class
GridView class
Quickstart: adding ListView and GridView controls
Item templates for list layouts
Item templates for grid layouts
Samples
HTML ListView essentials sample
HTML ListView customizing interactivity sample
HTML ListView grouping and SemanticZoom sample
HTML ListView item templates sample
HTML ListView working with data sources sample
HTML ListView optimizing performance sample
HTML ListView incremental loading behavior sample
XAML ListView and GridView essentials sample
XAML ListView and GridView customizing interactivity sample
XAML GridView grouping and SemanticZoom sample

 

 

Show:
© 2014 Microsoft