How the semantic zoom is done in Metro Start screen?

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.

Answer 1

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.

Answer 2

You find an explanation and an example (for the consumer preview, but still working) in this article.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

Indeed: it's a grouped CollectionViewsource. The ZoomedInView is bound to the items, the ZoomedOutView is bound to the groups.

Answer 7

I do not see a real sample of working with items in the ZoomedOutView like the Start screen.