How to achieve SematicZoom like Windows App Store in Windows store app?

Question

In Windows App Store, Zoom Out will show like this.

When zoom in, it will show like this.

Zoom Out I can achieve it use GridView, but how to achieve Zoom in effect that reflecting the category?? Is there any example??

Here is added .xaml code:

<SemanticZoom Grid.Row="1" x:Name="SemanticZoom">
    <SemanticZoom.ZoomedOutView>
        <GridView x:Name="ZoomedOutGV" SelectionMode="None"
                  ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                  ItemsSource="{Binding Source={StaticResource cvs1}}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid ItemHeight="200" ItemWidth="400"
                              MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <TextBlock
                        Text="{Binding Group.Key}" FontFamily="Segoe UI Light" FontSize="40"/>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <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 x:Name="ZoomedInGV" SelectionMode="None"
                  ItemsSource="{Binding Source={StaticResource cvs1}}"
                  ItemTemplate="{StaticResource GridViewItemTemplate}"
                  ItemContainerStyleSelector="{StaticResource VariableSizedStyleSelector}"
                  IsItemClickEnabled="True" ItemClick="Course_ItemClick">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource TextPrimaryButtonStyle}" Height="90"
                                    Margin="100, 0, 100, 0" Click="CategoryButton_Click">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Key}"
                                               Style="{StaticResource HeaderTemplateKeyTextBlockStyle}"/>
                                    <TextBlock Text="{StaticResource ChevronGlyph}"
                                               Style="{StaticResource HeaderTemplateRightRowTextBlockStyle}"/>
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Style="{StaticResource VariableSizedWrapGridTemplateStyle}" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>

C# code:

cvs1.Source = dataCategory;
(SemanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs1.View.CollectionGroups;

Answer 1

You can achieve this by wrapping the GridView with a SemanticZoom object

 <CollectionViewSource
        x:Name="Results"
        Source="{Binding esults}"
        IsSourceGrouped="true"
        ItemsPath="Items"/>

<SemanticZoom >
    <SemanticZoom.ZoomedOutView>
        <GridView ItemsSource="{Binding CollectionGroups, Source={StaticResource Results}}">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <!-- Template for ZoomedOut -->
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </SemanticZoom.ZoomedOutView>
    <SemanticZoom.ZoomedInView>
        <GridView x:Name="itemGridView"
                    ItemsSource="{Binding Source={StaticResource Results}}">
            <GridView.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupItemStyle}">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <!-- Template for the different groups -->
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
        </GridView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>