WinRT Sample: A quick look at Semantic Zoon

By: Bill Wagner

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):

<SemanticZoom x:Name="semanticZoom" VerticalAlignment="Bottom">

    <SemanticZoom.ZoomedOutView>

        <GridView Foreground="White">

            <GridView.ItemTemplate>

                <DataTemplate>

                    <TextBlock

                        Text="{Binding Group.Key}"

                        FontFamily="Segoe UI Light"

                        FontSize="24"

                        Foreground="Black" />

                </DataTemplate>

            </GridView.ItemTemplate>

            <GridView.ItemsPanel>

                <ItemsPanelTemplate>

                    <WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />

                </ItemsPanelTemplate>

            </GridView.ItemsPanel>

            <GridView.ItemContainerStyle>

                <Style TargetType="ListViewItem">

                    <Setter Property="Margin" Value="4" />

                    <Setter Property="Padding" Value="10" />

                    <Setter Property="BorderBrush" Value="Gray" />

                    <Setter Property="BorderThickness" Value="1" />

                    <Setter Property="HorizontalContentAlignment" Value="Center" />

                    <Setter Property="VerticalContentAlignment" Value="Center" />

                </Style>

            </GridView.ItemContainerStyle>

        </GridView>

    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>

        <GridView ItemsSource="{Binding Source={StaticResource cvs2}}" IsSwipeEnabled="True">

            <GridView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Left" Background="White">

                        <Image Source="{Binding Image}" Height="60" Width="60" VerticalAlignment="Center" Margin="0,0,10,0"/>

                        <TextBlock TextWrapping="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>

                            <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />

                        </DataTemplate>

                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.ContainerStyle>

                        <Style TargetType="GroupItem">

                            <Setter Property="Template">

                                <Setter.Value>

                                    <ControlTemplate TargetType="GroupItem">

                                        <StackPanel Orientation="Vertical">

                                            <ContentPresenter Content="{TemplateBinding Content}" />

                                            <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />

                                        </StackPanel>

                                    </ControlTemplate>

                                </Setter.Value>

                            </Setter>

                        </Style>

                    </GroupStyle.ContainerStyle>

                    <GroupStyle.Panel>

                        <ItemsPanelTemplate>

                            <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />

                        </ItemsPanelTemplate>

                    </GroupStyle.Panel>

                </GroupStyle>

            </GridView.GroupStyle>

            <GridView.ItemsPanel>

                <ItemsPanelTemplate>

                    <StackPanel Orientation="Horizontal" />

                </ItemsPanelTemplate>

            </GridView.ItemsPanel>

            <Button Visibility="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:

private void 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.

WinRT Sample: A quick look at Semantic Zoon

1 comment to WinRT Sample: A quick look at Semantic Zoom