WinRT Sample: A quick look at Semantic Zoom
Yes, this is yet another of those notes about one of the Metro samples. This one discusses grouped views and semantic zoom. As was true in many of the recent samples, this one focuses on many of the features of Windows RT XAML. This one shows grouped data in grid views, and semantic zoom. I didn't take notes on the headers part of the sample, because it's really quite straightforward.  The semantic zoom is pretty cool though. Even here, the code (and the XAML) is very straightforward. In fact, almost everything is in the XAML. If your app supports semantic zoom, you just add a semantic zoom control to your page, and define the two different views (the zoomed out view, and the zoomed in view):
<SemanticZoomx:Name="semanticZoom"VerticalAlignment="Bottom">
 
<SemanticZoom.ZoomedOutView>
 
<GridViewForeground="White">
 
<GridView.ItemTemplate>
 
<DataTemplate>
 
<TextBlock
 
Text="{Binding Group.Key}"
 
FontFamily="Segoe UI Light"
 
FontSize="24"
 
Foreground="Black"/>
 
</DataTemplate>
 
</GridView.ItemTemplate>
 
<GridView.ItemsPanel>
 
<ItemsPanelTemplate>
 
<WrapGridItemWidth="75"ItemHeight="75"MaximumRowsOrColumns="1"VerticalChildrenAlignment="Center"/>
 
</ItemsPanelTemplate>
 
</GridView.ItemsPanel>
 
<GridView.ItemContainerStyle>
 
<StyleTargetType="ListViewItem">
 
<SetterProperty="Margin"Value="4"/>
 
<SetterProperty="Padding"Value="10"/>
 
<SetterProperty="BorderBrush"Value="Gray"/>
 
<SetterProperty="BorderThickness"Value="1"/>
 
<SetterProperty="HorizontalContentAlignment"Value="Center"/>
 
<SetterProperty="VerticalContentAlignment"Value="Center"/>
 
</Style>
 
</GridView.ItemContainerStyle>
 
</GridView>
 
</SemanticZoom.ZoomedOutView>
 
<SemanticZoom.ZoomedInView>
 
<GridViewItemsSource="{Binding Source={StaticResource cvs2}}"IsSwipeEnabled="True">
 
<GridView.ItemTemplate>
 
<DataTemplate>
 
<StackPanelOrientation="Horizontal"Margin="10,10,0,0"HorizontalAlignment="Left"Background="White">
 
<ImageSource="{Binding Image}"Height="60"Width="60"VerticalAlignment="Center"Margin="0,0,10,0"/>
 
<TextBlockTextWrapping="Wrap"Style="{StaticResource ItemTitleStyle}"Width="200"VerticalAlignment="Center"Text="{Binding Title}"HorizontalAlignment="Left"FontFamily="Segoe UI"/>
 
</StackPanel>
 
</DataTemplate>
 
</GridView.ItemTemplate>
 
<GridView.GroupStyle>
 
<GroupStyle>
 
<GroupStyle.HeaderTemplate>
 
<DataTemplate>
 
<TextBlockText='{Binding Key}'Foreground="Gray"Margin="5"FontSize="18"FontFamily="Segoe UI Light"/>
 
</DataTemplate>
 
</GroupStyle.HeaderTemplate>
 
<GroupStyle.ContainerStyle>
 
<StyleTargetType="GroupItem">
 
<SetterProperty="Template">
 
<Setter.Value>
 
<ControlTemplateTargetType="GroupItem">
 
<StackPanelOrientation="Vertical">
 
<ContentPresenterContent="{TemplateBinding Content}"/>
 
<ItemsControlx:Name="ItemsControl"ItemsSource="{Binding GroupItems}"/>
 
</StackPanel>
 
</ControlTemplate>
 
</Setter.Value>
 
</Setter>
 
</Style>
 
</GroupStyle.ContainerStyle>
 
<GroupStyle.Panel>
 
<ItemsPanelTemplate>
 
<VariableSizedWrapGridOrientation="Vertical"MaximumRowsOrColumns="3"/>
 
</ItemsPanelTemplate>
 
</GroupStyle.Panel>
 
</GroupStyle>
 
</GridView.GroupStyle>
 
<GridView.ItemsPanel>
 
<ItemsPanelTemplate>
 
<StackPanelOrientation="Horizontal"/>
 
</ItemsPanelTemplate>
 
</GridView.ItemsPanel>
 
<ButtonVisibility="Collapsed"/>
 
</GridView>
 
</SemanticZoom.ZoomedInView>
 
</SemanticZoom>
 
  I'm not sure why, but this sample sets the DataSource for the zoomed in view using binding, and sets the source for the zoomed out sample using code:  
cvs2.Source = dataLetter;
 
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;
 
The pinch gesture support is built into the control, so that just works. This sample adds a button to switch views, and that changes from the zoomed out to the zoomed in view when pressed:
privatevoid scenario3switchViewsClickHandler(object sender, RoutedEventArgs e)
 
{
 
    semanticZoom.ToggleActiveView();
 
}
 
Sure, this isn't rocket science, but it does show a couple worthwhile design ideas. For one, semantic zoom is not that much code. If your app should support it, do so. Second, while the XAML for Windows Metro looks familiar, there is some interesting new concepts there. The most important part about this sample is that semantic zoom is not about showing the same view in a larger or smaller view. Semantic zoom done right reimagines your data in a different view. The zoomed out and zoomed in views do display different controls. You have one view when you’re zoomed out. You have a totally different view of the data when you are zoomed in on a subset of the data.
Created: 5/14/2012 4:15:00 PM

Current Projects

I create content for .NET Core. My work appears in the .NET Core documentation site. I'm primarily responsible for the section that will help you learn C#.

All of these projects are Open Source (using the Creative Commons license for content, and the MIT license for code). If you would like to contribute, visit our GitHub Repository. Or, if you have questions, comments, or ideas for improvement, please create an issue for us.

I'm also the president of Humanitarian Toolbox. We build Open Source software that supports Humanitarian Disaster Relief efforts. We'd appreciate any help you can give to our projects. Look at our GitHub home page to see a list of our current projects. See what interests you, and dive in.

Or, if you have a group of volunteers, talk to us about hosting a codeathon event.