Answered by:
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.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.
- Proposed as answer by Alejandro Campos MagencioMicrosoft employee, Moderator Wednesday, June 27, 2012 1:43 PM
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