MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

• Though win-item is listed as a style, it’s deprecated and may be removed in the future: just style
the item template directly.
• The documentation points out that styles like win-container and win-surface are used by
multiple WinJS controls. (FlipView uses a few of them.) If you want to override styles for a
ListView, be sure to scope your selectors them with other classes like .win-listview or a
particular control’s id or class.
• The default ListView height is 400px, and the control does not automatically adjust itself to its
content. You’ll almost always want to override that style in CSS or set it from JavaScript when
you know the space that the ListView should occupy, as we’ll cover in Chapter 6, “Layout.”
• Styles not shown in the figure but described on Styling the ListView and its items include
win-focusedoutline, win-selection, win-selected, win-selectionborder,
win-selectionbackground, and win-selectionhint. There is also the win-selectionstylefilled
class that you add to an item to use a filled selection style rather than the default bordered style,
as shown here:
Backdrops
There is another ListView visual that is a bit like styling but not affected by styling. This is called the
backdrop, an effect that’s turned on by default when you use the GridLayout. On low-end hardware,
especially low-power mobile devices, panning around quickly in a ListView can very easily outpace
the control’s ability to load and render items. To give the user a visual indication of what they’re
doing, the GridLayout displays a simple backdrop of item outlines based on the default item size and
pans that backdrop until such time as real items are rendered. As we’ll see in the next section, you
can disable this feature with the GridLayout’s disableBackdrop property and override its default gray
color with the backdropColor property.
Layouts and Cell Spanning
The ListView’s layout property, which you can set at any time, contains an object that’s used to organize
the list’s items. WinJS provides two prebuilt layouts: WinJS.UI.GridLayout and WinJS.UI.ListLayout.
The first, already described earlier in this chapter, provides a horizontally panning two-dimensional
layout that places items in columns (top to bottom) and then rows (left to right). The second is a
one-dimensional top-to-bottom layout, suitable for vertical lists (as in snapped view). These both follow
the recommended design guidelines for presenting collections.
216