c# - Windows ストア アプリで Windows App Store のような SematicZoom を実現するにはどうすればよいですか?

Question

Windows App Store では、Zoom Out はこのように表示されます。

拡大するとこのように表示されます。

ズームアウト GridView を使用して実現できますが、カテゴリを反映したズームイン効果を実現するにはどうすればよいですか?? 例はありますか??

追加された .xaml コードは次のとおりです。

<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# コード:

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