Windows 8 is full of groovy nuggets of innovation. One of my favorites is the Sematic Zoom. This control is a container of two other controls – usually list controls. The first declares the UI when zoomed out. The second declares the UI when zoomed in. Simple.
Easy and Intuitive
To use Semantic Zoom, users performs a standard two-finger pinch-zoom. This manipulation is the natural gesture for touch users desiring to drill in or back out. The two-finger pinch-zoom originated in image applications, but there it was performing an Optical Zoom.
What about the mouse?
Everything that works for touch in Windows 8 works for the keyboard and mouse. This is a common concern when users see a touch demo – and it’s a great answer to offer them back, there’s a no-compromise experience for keyboard and mouse. Semantic Zoom is CTRL + Mouse Wheel.
Note: the native controls in Windows 8 (that every developer should use) are build to handle touch and keyboard/mouse alike. Custom controls, however, may or may not have the correct support – this is up to the authoring developer. If you are such a developer, remember both modalities.
Not optical zoom
In a recent article I discussed how XAML developers, especially on Windows Phone, should use the native Transforms when manipulating controls – including scaling effects. Using Transforms allows the operating system to optimize the execution of the effect.
Semantic Zoom is not a Scale Transform. This is because we are not zooming into something so that it is bigger. Optical zoom makes the subject control bigger on the screen. In an image application this is great. Zoom into a road sign to help read it. This is optical zooming – a change to the scale.
Semantic Zoom
By contrast, Semantic Zoom is changing the nature of the display. It is aggregating data. It is grouping data. It is illustrating data. As you move from list to zoom, the UI shifts to give you another view – either to help in navigation or understanding of the data better . It is not scaling the list.
By example
Rather than explaining it – let’s go visual. We can work through the two uses of Semantic Zoom: help in navigation and understanding the data better.
Help in navigation
The image above is my start screen. On the left I have zoomed out. It shrinks every tile to the simplest tile, and allows me to see the shape of the list – in this case so I can group them easily. On the right I have zoomed in. The tiles are full size and full fidelity.
The Semantic Zoom in the Start Screen is used to help me navigate my tiles. As I install more programs, the list of tiles can grow. The number of groups can grow. Zooming out lets me get a handle on my tiles without having to deal with them individually. There is a certainly Scale factor to this implementation, but it is most definitely a Semantic Zoom as the behavior of the list changes in each mode.
Understand the data better
The image above is the Contoso Recipes sample application. On the left I have zoomed out. It shrinks the list of recipes to the ethic group into which they belong. I see a map, not images of food. On the right I have zoomed in. The list shows individual recipes grouped by region, showing images of food.
The Semantic Zoom in this application is used to help me understand the data better. As the number of recipes grows, the grouping becomes harder to consume – that is until I use Semantic Zoom to back away from the trees so that I can see the forest. And the forest even has a map on it.
Simple implementation
Using Semantic Zoom is brainless – unless you are like me. I assumed it inherited from ItemsControl, but it does not. It is switches views and that is it. The control inside each view is solely responsible for binding the data and rendering a special look.
Here’s a simple, non-functional implementation:
In the code above, see the <SemanticZoom.ZoomedInView> tag? Between that and it’s companion closing tag is where you define whatever you want when the user is zoomed in (the default). And, see the CollectionViewSource in Resources? Notice that it is bound only to the ListViews inside each view. No data is bound to the SemanticZoom control. It’s not a data control.
Important members
The full list of class members can be found here. The list below is based on the preliminary data and may be out of date. You should double-check before you code in the dark. These are the big ones:
Events
ViewChangeCompleted - Occurs when a view change is complete and the view is displayed.
ViewChangeStarted - Occurs when a view change is requested.
Methods
ToggleActiveView - Changes from the current active view to the other possible view. For example, if IsZoomedInViewActive is true, calling this method changes to zoomed-out view.
Properties
CanChangeViews - Gets or sets a value that declares whether the SemanticZoom can change display views.
IsZoomedInViewActive - Gets or sets a value that determines whether the ZoomedInView is the active view.
IsZoomedInViewActiveProperty - Identifies the IsZoomedInViewActive dependency property.
ZoomedInView - Gets or sets the semantically more complete zoomed-in view of the SemanticZoom.
ZoomedInViewProperty - Identifies the ZoomedInView dependency property.
ZoomedOutView - Gets or sets the zoomed-out view of the SemanticZoom.
ZoomedOutViewProperty - Identifies the ZoomedOutView dependency property.
Questions
I had some questions, maybe you have some, too. Let me share what we know.
How many levels can you zoom?
Semantic zoom has two levels, zoomed in and zoomed out. You might want more, but that might be because you want to change scope with semantic zoom (seem below). If there were three zoom views, consider the trickiness for the user to get to the middle view. Always advocate the user.
Can you nest semantic zoom?
Nesting two controls that listen for the same gesture is not recommended.
Can I data bind semantic zoom?
Semantic zoom is not a data control. Having said that, in XAML you can data bind anything. But there is no ItemsSource property on Semantic Zoom – in case that’s what you were looking for (I was).
Why does semantic zoom exist?
We know it’s to help understanding the data, especially in large lists. We know it’s to help in navigation, especially in large lists. But, but fundamentally it’s to reduce scrolling. If your implementation of semantic zoom does not reduce scrolling, reconsider your approach.
Can the views scroll?
Of course. It’s important to point out that each of the two views can contain anything. But remember this. You should never alternate scrolling direction between views – never have one view scroll horizontally and the other scroll vertically. This sort of thing would kill usability.
Is it a drill-down tool?
The other thing you might wonder is how to selected an item in one view so it is expanded in the second view. No, stop this. Semantic zoom should not change the scope of the data. It just shows the same data in two views. If the user selects an item, then navigate away – changing scope.
Don’t use semantic zoom for changing scope. I expect this will be the most common misuse.
Conclusion
Windows 8 is great. But there’s a lot to learn with all this opportunity. Semantic zoom is a great example of innovation in Windows 8. It will be natural for users, but developers have to decide to implement it. When you consider your application remember this principle in Metro application design – “have pride in craftsmanship”. Always advocate the user.
And, best of luck!