如何在 Windows 商店应用中实现类似 Windows 应用商店的 SematicZoom？

Question

在 Windows App Store 中，Zoom Out 会这样显示。

放大后会这样显示。

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;

Answer 1

您可以通过使用 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>