MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

screen with a finger. With semantic zoom, you can zoom out to see headers, categories, or some other
condensation of the data, and then tap on one of those items to zoom back into its section or group.
The design guidance recommends having the zoomed-out view fit on one to three screenfuls at most,
making it very easy to see and comprehend the whole data set.
Go ahead and try semantic zoom through Scenario 2 of the ListView grouping and Semantic Zoom
sample. To switch between the views, use pinch-zoom touch gestures, Ctrl+/Ctrl- keystrokes,
Ctrl+mouse wheel, and/or a small zoom button that automatically appears in the lower-right corner of
the control, as shown in Figure 5-5. When you zoom out, you’ll see a display of the group headers, as
also shown in the figure.
FIGURE 5-5 Semantic zoom between the two views in the ListView grouping and Semantic Zoom sample.
The control itself is quite straightforward to use. In markup, declare a WinJS control using the
WinJS.UI.SemanticZoom constructor. Within that element you then declare two (and only two) child
elements: the first defining the zoomed-in view, and the second defining the zoomed-out view—always
in that order. Here’s how the sample does it with two ListView controls (plus the template used for the
zoomed-out view; I’m showing the code in the modified sample included with this chapter’s copanion
content):