Guidelines for list and grid view controls
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.
Here is a list of search results displayed in a standard grid view:
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
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.
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.
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.
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.
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.
- 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.
Using HTML? To make your ListView behave like the master pane in the master/detail pattern, configure it like this:
selectionMode: "single" or "multi". Use "single" for single-select.
swipeBehavior: "none" for single, "select" for multi.
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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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