C# 如何在Windows应用商店应用程序中实现类似Windows应用商店的语义缩放？

在Windows应用商店中，缩小显示如下

放大时，它将显示如下

缩小我可以用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>

---

可以通过使用SemanticZoom对象包装GridView来实现这一点

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

收集组是什么意思？？我实现了ZoomedInView，但是如何编写ZoomedOutView的数据模板来反映每个类别？我添加了有问题的代码。它是CollectionViewSource上的一个属性。也许我没有表达我的观点。我知道如何实现SemanticZoom，但我不知道如何实现ZoomedOutView的数据模板。我想展示这样一种效果：当我挤压屏幕时，它只会缩放，但不会改变windows app store的外观。

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