语义式缩放

语义式缩放使用户能够在相同内容的两个不同视图之间切换，以便他们可以在大型分组数据集中快速导航。

• 放大视图是内容的主视图。 这是显示个别数据项的主视图。
• 缩小视图是相同内容的更高级别的视图。 通常，你会在此视图中显示分组数据集的组标头。

例如，当查看地址簿时，用户可以通过缩小快速跳转到字母“W”，然后在该字母上放大并查看与之相关联的名称。

功能：

• 缩小视图的大小受语义式缩放控件的边界限制。
• 点击组标题可切换视图。 可以启用收缩作为一种在视图之间切换的方式。
• 视图之间的活动标题切换。

这是正确的控件吗？

在需要显示大到无法在一个或两个页面上全部显示的分组数据集时，请使用 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 控件。

相关文章

• 导航设计基础知识
• 列表视图和网格视图
• 项目容器和模板