语义式缩放 - Windows apps | Microsoft Learn

这是正确的控件吗？

在需要显示大到无法在一个或两个页面上全部显示的分组数据集时，请使用 SemanticZoom 控件。

不要将语义上的缩放与光学缩放混淆。尽管它们的交互和基本行为（基于缩放比例显示更多或更少细节）一致，但是光学缩放是指调整内容区域或对象（如照片）的放大倍数。有关执行光学缩放的控件的信息，请参阅 ScrollViewer 控件。

在你的应用中使用语义式缩放时，请确保项目布局和平移方向不会根据缩放级别而更改。布局和平移交互应该在各个缩放级别上保持一致且可预测。

语义式缩放支持用户快速跳转到内容，因此请将缩小模式中的页面/屏幕数限制为三个。过多的平移会减少语义式缩放的实用性。

避免使用语义式缩放来更改内容的范围。例如，相册不应在文件资源管理器中切换为文件夹视图。

使用视图中必不可少的结构和语义。

对分组集合中的项使用组名称。

对未分组但已排序的集合使用分类排序（例如，按日期时间先后排序或按名称列表字母排序）。

WinUI 库

控件库中的 SemanticZoom 部分演示了一种导航体验，使用户可以快速放大和缩小控件类型的分组部分。

“照片”应用

下面是在“照片”应用中使用的语义式缩放。照片按月分组。为了实现更快的导航，在默认网格视图中选择月标头可缩小到月列表视图。

UWP 和 WinUI 2

本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。有关平台特定信息和示例，请参阅 UWP API 参考。

本部分包含需要在 UWP 或 WinUI 2 应用中使用该控件的信息。

此控件的 API 存在于 Windows.UI.Xaml.Controls 命名空间中。

UWP API： SemanticZoom 类、 ListView 类、 GridView 类

打开 WinUI 2 库应用并查看 SemanticZoom 的操作。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 获取所有控件的最新样式和模板。

创建语义式缩放

重要 API： SemanticZoom 类、 ListView 类、 GridView 类

打开 WinUI 3 库应用并查看 SemanticZoom 的操作。

WinUI 3 库 应用包含大多数 WinUI 3 控件、特性和功能的交互式示例。从 Microsoft Store 获取应用或在 GitHub 上获取源代码

SemanticZoom 控件没有其自己的任何可视表示形式。它是一个主机控件，用于管理提供内容视图的另外 2 个控件，通常为 ListView 或 GridView 控件。将视图控件设置为 SemanticZoom 的 ZoomedInView 和 ZoomedOutView 属性。

语义式缩放所需的 3 个要素为：

分组数据源。（组在放大视图中通过 GroupStyle 定义来定义。）

显示项目级数据的放大视图。

显示组级数据的缩小视图。

在使用语义式缩放前，应了解如何将列表视图用于分组数据。有关详细信息，请参阅列表视图和网格视图。

若要定义放大视图和 SemanticZoom 控件的缩小视图，可以使用任何两个实现 ISemanticZoomInformation 接口的控件。 XAML 框架提供 3 个可实现此接口的控件：ListView、GridView 和 Hub。

此 XAML 显示 SemanticZoom 控件的结构。将其他控件分配到 ZoomedInView 和 ZoomedOutView 属性。

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->
   </SemanticZoom.ZoomedInView>
   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>
此处的示例摘自 WinUI 库示例的 SemanticZoom 页。 可以下载该示例来查看完整代码，包括数据源。 此语义式缩放使用 GridView 提供放大视图，使用 ListView 提供缩小视图。
定义放大视图
下面是用于放大视图的 GridView 控件。 放大视图应分组显示个别数据项。 此示例介绍如何在具有图像和文本的网格中显示项目。
<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}"
              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>
ZoomedInGroupHeaderTemplate 资源中定义了组标头的外观。 ZoomedInTemplate 资源中定义了项目的外观。
<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}"
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>
<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}"
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}"
                       TextWrapping="Wrap" HorizontalAlignment="Left"
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>
定义放大视图
此 XAML 为缩小视图定义 ListView 控件。 此示例介绍如何在列表中将组标头显示为文本。
<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}"
              SelectionMode="None"
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>
ZoomedOutTemplate 资源中定义了外观。
<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}"
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>
放大视图和缩小视图应该同步，因此如果用户在缩小视图中选择某个组，则此相同组的详细信息应该显示在放大视图中。 你可以使用 CollectionViewSource 或添加代码以同步视图。
绑定到同一 CollectionViewSource 的所有控件始终具有相同的当前项。 如果这两个视图使用同一 CollectionViewSource 作为它们的数据源，CollectionViewSource 将自动同步视图。 有关详细信息，请参阅 CollectionViewSource。
如果你不使用 CollectionViewSource 同步视图，则应该处理 ViewChangeStarted 事件并在事件处理程序中同步项目，如下所示。
<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">
private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
    if (e.IsSourceZoomedInView == false)
        e.DestinationItem.Item = e.SourceItem.Item;
获取示例代码
WinUI 库示例 - 查看交互式格式的所有 XAML 控件。
导航设计基础知识
列表视图和网格视图
项目容器和模板