locked
SemanticZoom for CSS only changes?

    Question

  • Is there any way to use the SemanticZoom feature without the need to introduce multiple listviews & templates?

    For example; for CSS only changes, where the datasource and other details are identical.

    Sunday, May 05, 2013 11:49 PM

Answers

  • Semantic Zoom is a control that simply depends on having two (and only two) child elements that provide the zoomed-in and zoomed-out view, respectively. Those elements must implement an interface known as WinJS.UI.IZoomableView through a property called zoomableView.

    Of all built-in HTML and WinJS controls, only ListView does this, which is why you typically see semantic zoom in that context. However, you can certainly provide this interface on a custom control, where the object returned by the constructor should contain a zoomableView property, which is an object containing the methods of the interface. Among these methods are beginZoom and endZoom for obvious purposes, and getCurrentItem and setCurrentItem that enable the semantic zoom control to zoom in to the right group when it’s tapped in the zoomed-out view. For an example, check out the HTML SemanticZoom for custom controls sample.

    This means that for your purposes, you can have two instances of essentially the same control that are working from the same data source (you’d likely pass that data source into the constructor). Each instance would know if it's zoomed in or out and manage its CSS properties accordingly. It is essential that you have two elements, however, because of the way the semantic zoom control is implemented (it shows/hides either child as it needs, and does some animation between the two).

    That said, semantic zoom is essentially a UX design behavior, and there’s nothing that says you have to use the WinJS control for it. You can certainly replicate many of its behaviors on your own (e.g. the mouse/keyboard interface and animation look & feel). Then you can just have a single control that responds to the same gestures by switching views.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Monday, May 06, 2013 5:39 PM

All replies

  • Semantic Zoom is a control that simply depends on having two (and only two) child elements that provide the zoomed-in and zoomed-out view, respectively. Those elements must implement an interface known as WinJS.UI.IZoomableView through a property called zoomableView.

    Of all built-in HTML and WinJS controls, only ListView does this, which is why you typically see semantic zoom in that context. However, you can certainly provide this interface on a custom control, where the object returned by the constructor should contain a zoomableView property, which is an object containing the methods of the interface. Among these methods are beginZoom and endZoom for obvious purposes, and getCurrentItem and setCurrentItem that enable the semantic zoom control to zoom in to the right group when it’s tapped in the zoomed-out view. For an example, check out the HTML SemanticZoom for custom controls sample.

    This means that for your purposes, you can have two instances of essentially the same control that are working from the same data source (you’d likely pass that data source into the constructor). Each instance would know if it's zoomed in or out and manage its CSS properties accordingly. It is essential that you have two elements, however, because of the way the semantic zoom control is implemented (it shows/hides either child as it needs, and does some animation between the two).

    That said, semantic zoom is essentially a UX design behavior, and there’s nothing that says you have to use the WinJS control for it. You can certainly replicate many of its behaviors on your own (e.g. the mouse/keyboard interface and animation look & feel). Then you can just have a single control that responds to the same gestures by switching views.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Monday, May 06, 2013 5:39 PM
  • Looks like this isn't possible. The documentation of the SemanticZoom Control says that you have to provide two Controls to the SemanticZoom: A zoomed in view and a zoomed out view. Those controls have to implement the IZommableView Interface. Currently this is only done by the listview.
    Monday, May 06, 2013 5:47 PM