locked
How the semantic zoom is done in Metro Start screen? RRS feed

  • Question

  • I am trying to figure out how to do a semantic zoom for a Metro grid app (XAML). In the Metro Start screen, an individual tile/icon is highlighted when mouse-over in the regular view (ZoomedIn). In the ZoomedOut view, a group is highlighted when mouse-over and clicking the group leads to the desired ZoomedIn view of that group. Any pointers on how this is done are greatly appreciated.
    Friday, June 22, 2012 10:38 PM

Answers

  • The control is called 'semantic zoom' -not just 'zoom'- because the two views may indeed look entirely different. Nevertheless, you can build a control similar to the Metro start screen and the store screen using a semantic zoom:

    • Set the ItemTemplate of the ZoomedOutView to something that looks like a smaller version of the ItemsPanelTemplate of the ZoomedInView
    • Use a horizontal StackPanel or a Gridview as ItemsPanelTemplate of the ZoomedOutView

    Using the correct ratio between size of the ZoomedOutView's Itemtemplate and the ZoomedInView's ItemsPanelTemplate should yield a graceful transformation.

    • Marked as answer by Min ZhuMember Tuesday, July 3, 2012 6:15 AM
    Saturday, June 23, 2012 6:03 PM

All replies

  • Have you taken a look at the Semantic Zoom with Grouped Grid View sample?  You can find a "sticky" item at the top of this forum for it.
    Saturday, June 23, 2012 2:51 PM
  • You find an explanation and an example (for the consumer preview, but still working) in this article.
    Saturday, June 23, 2012 3:27 PM
  • Every sample I searched on the web looks like some kind of clumsy hack, even the one from the sdk itself. None of them looks like the graceful in-out from the Start screen. It may be just a very simple thing I am aware of.
    Saturday, June 23, 2012 5:26 PM
  • The control is called 'semantic zoom' -not just 'zoom'- because the two views may indeed look entirely different. Nevertheless, you can build a control similar to the Metro start screen and the store screen using a semantic zoom:

    • Set the ItemTemplate of the ZoomedOutView to something that looks like a smaller version of the ItemsPanelTemplate of the ZoomedInView
    • Use a horizontal StackPanel or a Gridview as ItemsPanelTemplate of the ZoomedOutView

    Using the correct ratio between size of the ZoomedOutView's Itemtemplate and the ZoomedInView's ItemsPanelTemplate should yield a graceful transformation.

    • Marked as answer by Min ZhuMember Tuesday, July 3, 2012 6:15 AM
    Saturday, June 23, 2012 6:03 PM
  • This does not resolve what I am interested in. The Start screen seems to bind to a collection at the ZoomedIn view and to a collection of collections at the ZoomedOut view.
    Saturday, June 23, 2012 7:53 PM
  • Indeed: it's a grouped CollectionViewsource. The ZoomedInView is bound to the items, the ZoomedOutView is bound to the groups.
    Saturday, June 23, 2012 8:23 PM
  • I do not see a real sample of working with items in the ZoomedOutView like the Start screen.
    Tuesday, July 3, 2012 3:05 PM