Adding SemanticZoom controls (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
The SemanticZoom control enables the user to zoom between two different views of the same content. Here we show you how to use the SemanticZoom control.
.png "A SemanticZoom control's zoomed-out and zoomed-in views")
Watch this brief video for an overview of Semantic Zoom and how to implement it with JavaScript and HTML.
A user performs semantic zooming by pinching (moving the fingers closer together zooms out and moving them apart zooms in), or by holding the CTRL key down while scrolling the mouse scroll wheel, or by holding the CTRL key down and pressing the + or - key. The SemanticZoom also provides a zoom out button when the zoomed-in view is shown.
Zooming through content
Semantic zoom is useful for quickly panning through content. Tapping the content in a zoomed-out view will zoom the view and pan to the tapped point, as shown here.
Zoomed out, the entire content can be a touch target:
.png "Zoomed out, the entire content can be a touch target.")
A tap on a section of the content:
.png "tap on a section of the content.")
Zoomed in and panned to the tapped area:
.png "Zoomed in and panned to the tapped area.")
A smooth cross-fade animation transitions from one semantic zoom to another. This is the default touch behavior and you can't customize it.
In this section
| Topic | Description |
|---|---|
Learn how to use the SemanticZoom control to zoom between two views of the same content. |
|
Item templates that you can use with a ListView that provides the zoomed out view for a SemanticZoom control. |