Semantic Zoom In Windows 8 Metro Applications


Semantic Zoom

Semantic zoom is a technique used for presenting and navigating large data sets with in single view.


Consider the app “Cars 2 Go”.

The Group details page lists huge number of car models, grouped by their manufacturer in alphabetical order. Take a look at the scroll bar at the bottom of the view and just imagine the amount of scrolling/panning that is needed to view cars manufactured by “Tesla”.  Panning and Scrolling are great for small sets of data; however navigation becomes cumbersome for huge data sets as above. Semantic zoom is tailored made for these situations.

Semantic Zoom uses two zoom levels

  1. Zoomed In view / Low level View. Above Image is an example of a Zoomed in view, where all the manufactures and models are displayed.
  2. Zoomed Out view /High level View. Below image is an example of a Zoomed out view, where only the manufacturers are displayed.

Now all that the user has to do is click on the manufacturer that he likes, and he will be taken back to the zoomed in view, and will be automatically panned/scrolled to the tapped/selected point.Consider for example, the user clicks on “Saabin the Zoomed out view. The user will be zoomed in, and will be automatically panned to Saab. This automatic panning is handled by the Semantic Zoom control internally and happens when the user taps or selects an item in the Zoomed out view. This is also referred to as “Scroll Jump” in MSDN.

To begin with, I have a Data Source which returns a collection of Make objects (manufactures). Each Make object contains a list of Model (car models – exposed using the property AllModels) objects. I started with the default grid template which comes out of the box. The Grouped Items page will be my entry point and will act as my high level view. The grouped items page has a

  1. Grouped Collection View source.
  2. Grid view which displays the contents of the Grouped collection view source.

All I need to do to create a Zoomed In view is to hook up the Collection View Source to the collection.





Now we have a zoomed in view, which will display all the models, grouped by their manufactures. In order to tell the runtime that this is the Zoomed in view, do the following.

  1. Add a Semantic zoom control to the Xaml, and define Zoomed In and Zoomed Out views as follows.


     2. Now make the above Grid View, part of the ZoomedInView definition as below



    Now it is time to define the Zoomed out view. Following are the mistakes that I made.

    1. When I did this the first time, I just copied the initial grid view and removed the Group Style and made it part of the Zoomed out View. Now both the grid views (one with Group Style and the other without Group Style) have the same grouped collection view source.

            Also remember we need to keep track of the selected group between the views in order to support Scroll Jump. Having the same collection view source as the Items Source for both the views should help. But there is one small problem. The CollectionViewSource is grouped by Manufacturer. So it basically behaves as a list of models (grouped by manufacturers). The first Grid view which defined Group Style knows how to display the data. The Second Grid View because of the absence of the Group Style is not aware of the Grouping Context (that is manufacturer) and considers the CollectionViewSource as a list of car models (without being aware of the manufacturers)

          In this scenario, the Zoom out view displays all the car models. We wanted it to display only the manufacturers.



    2.  After the first failed attempt, I was thinking of setting the Data Context to the collection of Makes and then binding the Zoomed out Grid View to that data context. The Data Context is aware of only the top level collection (manufacturers, not car models). This worked. My Zoomed Out view now shows a list of manufacturers which is quiet small and can be displayed in a single view.  But there is a draw back. Because both the Grid Views are pointing to different Sources (one pointing to CVS and the other pointing to DC), current position cannot be tacked across the views. This will break “Scroll Jump” functionality.


    After a bit of researching I found that, The CollectionViewSource contains a Collection View object. The Collection View defines a property called “Collection Groups” which is a collection of grouping contexts (In our case Manufacturer/Make). So we can bind the Zoom out view to the Collection groups (a list of manufacturers). And because of this both the Zoom In and Zoom Out views can be bound to the same collection view source (in different contexts), which means the current position can be tracked and therefore “Scroll Jump” can be supported.






    Its amazing how easy it is to implement Semantic zoom. Hope this helps.







    Comments (4)

    1. Thanks for sharing this.

    2. Nazia says:

      Hi Shiva,

      I need to have a semantic zoom as you mentioned below.

      Consider for example, the user clicks on “Saab” in the Zoomed out view. The user will be zoomed in, and will be automatically panned to Saab. This automatic panning is handled by the Semantic Zoom control internally and happens when the user taps or selects an item in the Zoomed out view.

      How the automatic panning happens? When I click an item in the Zoomed out view, the Zoomed in view starts from the beginning of my gridView.

      Please share me a sample code.

    3. Hooman says:

      Thanks great article, I have tried to scroll to a specific item though and it seems nighter ScrollIntoView nor MakeVisible command work in the ZoomeIn section

    4. Don says:

      Why didn't you clean up your source code to get rid of the ugly and distracting squigglies?