4 out of 9 rated this helpful - Rate this topic

Quickstart: adding SemanticZoom controls (Windows Store apps using C#/VB/C++ and XAML)

In this article

Prerequisites
What is the SemanticZoom control?
Defining zoomed-in and zoomed-out views
Add the SemanticZoom control
Using the SemanticZoom
Samples
Summary
Related topics

Important APIs

Learn how to use the SemanticZoom control to zoom between two views of the same content.

Prerequisites

We assume that you can add controls to a basic Windows Store app built for Windows using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.
To use the SemanticZoom control, you need to know how to use the GridView or ListView control. For help getting started with GridView and ListView controls, see Quickstart:Adding ListView and GridView controls.
To use the SemanticZoom control, you need to know how to create a grouped GridView or ListView. For more info, see How to group items in a list or grid.

What is the SemanticZoom control?

A SemanticZoom control's zoomed-out and zoomed-in views

The SemanticZoom control enables the user to zoom between two different views of the same content. One of these is the main view of the content. The second view is a view of the same content represented in a way that allows users to quickly navigate through it. For example, when viewing an address book, the user could zoom in on a letter and see the names associated with that letter.

To provide this zooming functionality, the SemanticZoom control uses two other controls: one to provide the zoomed-in view and one to provide the zoomed-out view.

XAML


<SemanticZoom>

    <SemanticZoom.ZoomedOutView>
        <!-- Put the GridView for the zoomed out view here. -->   
    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>
        <!-- Put the GridView for the zoomed in view here. -->       
    </SemanticZoom.ZoomedInView>

</SemanticZoom>

These controls can be any two controls that implement the ISemanticZoomInformation interface. The XAML framework provides two controls that implement the ISemanticZoomInformation interface: ListView and GridView. The examples in this quickstart show you how to use SemanticZoom with two GridView controls.

Tip When you use a GridView in a SemanticZoom control, always set the ScrollViewer.IsHorizontalScrollChainingEnabled attached property to false on the ScrollViewer that's in the GridView's control template, like this:

<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">.

When you use a ListView in a SemanticZoom control, always set the ScrollViewer.IsVerticalScrollChainingEnabled attached property to false, like this:

<ListView ScrollViewer.IsVerticalScrollChainingEnabled="False">.

Don't confuse semantic zooming with optical zooming. While they share both the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph. For info about a control that performs optical zooming, see the ScrollViewer control.

Defining zoomed-in and zoomed-out views

The SemanticZoom control uses two GridView controls: one to supply the zoomed-in view and one for the zoomed-out view.

In your Extensible Application Markup Language (XAML), define a GridView control for the zoomed-out view. This example shows how to display the group headers in a grid of blue squares.

XAML


<GridView Foreground="White" 
          ScrollViewer.IsHorizontalScrollChainingEnabled="False">
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding Group.Key}"
                FontFamily="Segoe UI Light"
                FontSize="24" />
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="2" 
                      VerticalChildrenAlignment="Center" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="Margin" Value="4" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="Background" Value="#FF25A1DB" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Bottom" />
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

In your XAML, define another GridView control for the zoomed-in view. The zoomed-in view should display the complete data collection. This example shows how to display the complete collection in a grid with an image and text.

XAML


<GridView ItemsSource="{Binding Source={StaticResource cvs2}}" 
          ScrollViewer.IsHorizontalScrollChainingEnabled="False"
          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 Text="{Binding Title}" TextWrapping="Wrap" Width="200"
                           Style="{StaticResource ItemTitleStyle}" FontFamily="Segoe UI"
                           VerticalAlignment="Center"  HorizontalAlignment="Left"/>
            </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>

Add the SemanticZoom control

In your markup, create the SemanticZoom control and assign the GridView controls to the ZoomedOutView and ZoomedInView properties.

In your XAML, add the SemanticZoom control. This example shows the markup before the GridView controls are added.

XAML


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

    <SemanticZoom.ZoomedOutView>
        <!-- Put the GridView for the zoomed out view here. -->   
    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>
        <!-- Put the GridView for the zoomed in view here. -->       
    </SemanticZoom.ZoomedInView>

</SemanticZoom>

In your XAML, put the GridView controls in the SemanticZoom control. This example shows the markup after the GridView controls are added.

XAML


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

    <SemanticZoom.ZoomedOutView>
        <GridView Foreground="White"
                  ScrollViewer.IsHorizontalScrollChainingEnabled="False">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <TextBlock
                        Text="{Binding Group.Key}"
                        FontFamily="Segoe UI Light"
                        FontSize="24" />
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid ItemWidth="75" ItemHeight="75" MaximumRowsOrColumns="2" 
                              VerticalChildrenAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="4" />
                    <Setter Property="Padding" Value="10" />
                    <Setter Property="Background" Value="#FF25A1DB" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="VerticalContentAlignment" Value="Bottom" />
                </Style>
            </GridView.ItemContainerStyle>
        </GridView>
    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>
        <GridView ItemsSource="{Binding Source={StaticResource cvs2}}"
                  ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
                  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 Text="{Binding Title}" TextWrapping="Wrap" Width="200"
                                   Style="{StaticResource ItemTitleStyle}" FontFamily="Segoe UI"
                                   VerticalAlignment="Center"  HorizontalAlignment="Left"/>
                    </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>

When you run app, you now see a single GridView, and you can now zoom between the two views you defined.

A SemanticZoom control's zoomed-out and zoomed-in views

Using the SemanticZoom

To zoom between the two views:

Input mechanism	Zoom out	Zoom in
Touch	Pinch out	Pinch in, tap
Keyboard	Ctrl + Minus sign, Enter, Space	Ctrl + Plus sign, Enter, Space
Mouse	Ctrl + Rotate the mouse wheel backward	Ctrl + Rotate the mouse wheel forward

Samples

To learn more about the SemanticZoom control, download the XAML GridView grouping and SemanticZoom sample.

Summary

You learned how to create a SemanticZoom that uses two GridView controls to create its zoomed-in and zoomed-out views.

Quickstart: adding SemanticZoom controls (Windows Store apps using C#/VB/C++ and XAML)

Prerequisites

What is the SemanticZoom control?

Defining zoomed-in and zoomed-out views

Add the SemanticZoom control

Using the SemanticZoom

Samples

Summary

Related topics