The Semantic Zoom control in WinJS, as you probably know, is basically a control that provides a switching effect between two other controls. Any control that implements the IZoomable interface will work, though in WinJS the only two that do this are the ListView and the Hub. (Implementing the interface is not difficult, though; refer to the HTML SemanticZoom for custom controls sample in the SDK.)

When hosting ListView controls (the most common case), the question can arise about how to size and position the zoomed out view, primarily because the ListView is hosted inside the SemanticZoom control, which sets the position of the ListView itself.

The trick in this case is to have the SemanticZoom control sized to 100% of the desired space, and then use the margins of the .win-surface style on the ListView. The SemanticZoom will honor those margins in its positioning work. Be sure, also, to adjust the height of the .win-surface style as well to prevent scrollbars from appearing when you set the margins.


Comments are closed