语义式缩放Semantic zoom

语义式缩放使用户能够在相同内容的两个不同视图之间切换,以便他们可以在大型分组数据集中快速导航。Semantic zoom lets the user switch between two different views of the same content so that they can quickly navigate through a large set of grouped data.

  • 放大视图是内容的主视图。The zoomed-in view is the main view of the content. 这是显示个别数据项的主视图。This is the main view where you show individual data items.
  • 缩小视图是相同内容的更高级别的视图。The zoomed-out view is a higher-level view of the same content. 通常,你会在此视图中显示分组数据集的组标头。You typically show the group headers for a grouped data set in this view.

例如,当查看地址簿时,用户可以通过缩小快速跳转到字母“W”,然后在该字母上放大并查看与之相关联的名称。For example, when viewing an address book, the user could zoom out to quickly jump to the letter "W", and zoom in on that letter to see the names associated with it.

重要的 APISemanticZoom 类ListView 类GridView 类Important APIs: SemanticZoom class, ListView class, GridView class

功能Features:

  • 缩小视图的大小受语义式缩放控件的边界限制。The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
  • 点击组标题可切换视图。Tapping on a group header toggles views. 可以启用收缩作为一种在视图之间切换的方式。Pinching as a way to toggle between views can be enabled.
  • 视图之间的活动标题切换。Active headers switch between views.

这是正确的控件吗?Is this the right control?

在需要显示大到无法在一个或两个页面上全部显示的分组数据集时,请使用 SemanticZoom 控件。Use a SemanticZoom control when you need to show a grouped data set that's large enough that it can't all be shown on one or two pages.

不要将语义上的缩放与光学缩放混淆。Don't confuse semantic zooming with optical zooming. 尽管它们的交互和基本行为(基于缩放比例显示更多或更少细节)一致,但是光学缩放是指调整内容区域或对象(如照片)的放大倍数。While they share both the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph. 有关执行光学缩放的控件的信息,请参阅 ScrollViewer 控件。For info about a control that performs optical zooming, see the ScrollViewer control.

示例Examples

XAML 控件库XAML Controls Gallery
XAML controls gallery

如果已安装 XAML 控件库应用,请单击此处打开此应用,了解 SemanticZoom 的实际应用If you have the XAML Controls Gallery app installed, click here to open the app and see the SemanticZoom in action.

XAML 控件库XAML Controls Gallery

控件库中的 SemanticZoom 部分演示了一种导航体验,使用户可以快速放大和缩小控件类型的分组部分。The SemanticZoom section within the Controls Gallery demonstrates a navigation experience that allows users to quickly zoom in and out of grouped sections of control types.

XAMl 控件库中使用的语义缩放示例

“照片”应用Photos app

下面是在“照片”应用中使用的语义式缩放。Here's a semantic zoom used in the Photos app. 照片按月分组。Photos are grouped by month. 为了实现更快的导航,在默认网格视图中选择月标头可缩小到月列表视图。Selecting a month header in the default grid view zooms out to the month list view for quicker navigation.

在“照片”应用中使用的语义式缩放

创建语义式缩放Create a semantic zoom

SemanticZoom 控件没有其自己的任何可视表示形式。The SemanticZoom control doesn't have any visual representation of its own. 它是一个主机控件,用于管理提供内容视图的另外 2 个控件,通常为 ListViewGridView 控件。It's a host control that manages the transition between 2 other controls that provide the views of your content, typically ListView or GridView controls. 将视图控件设置为 SemanticZoom 的 ZoomedInViewZoomedOutView 属性。You set the view controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.

语义式缩放所需的 3 个要素为:The 3 elements you need for a semantic zoom are:

  • 分组数据源。A grouped data source. (组在放大视图中通过 GroupStyle 定义来定义。)(Groups are defined by the GroupStyle definition in the zoomed-in view.)
  • 显示项目级数据的放大视图。A zoomed-in view that shows the item-level data.
  • 显示组级数据的缩小视图。A zoomed-out view that shows the group-level data.

在使用语义式缩放前,应了解如何将列表视图用于分组数据。Before you use a semantic zoom, you should understand how to use a list view with grouped data. 有关详细信息,请参阅列表视图和网格视图For more info, see List view and grid view.

注意  若要定义 SemanticZoom 控件的放大视图和缩小视图,可以使用任意两个可实现 ISemanticZoomInformation 接口的控件。Note  To define the zoomed-in view and the zoomed-out view of the SemanticZoom control, you can use any two controls that implement the ISemanticZoomInformation interface. XAML 框架提供 3 个可实现此接口的控件:ListView、GridView 和 Hub。The XAML framework provides 3 controls that implement this interface: ListView, GridView, and Hub.

此 XAML 显示 SemanticZoom 控件的结构。This XAML shows the structure of the SemanticZoom control. 将其他控件分配到 ZoomedInView 和 ZoomedOutView 属性。You assign other controls to the ZoomedInView and ZoomedOutView properties.

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

下面的示例摘自 XAML UI 基本示例的 SemanticZoom 页面。The examples here are taken from the SemanticZoom page of the XAML UI Basics sample. 可以下载该示例来查看完整代码,包括数据源。You can download the sample to see the complete code including the data source. 此语义式缩放使用 GridView 提供放大视图,使用 ListView 提供缩小视图。This semantic zoom uses a GridView to supply the zoomed-in view and a ListView for the zoomed-out view.

定义放大视图Define the zoomed-in view

下面是用于放大视图的 GridView 控件。Here's the GridView control for the zoomed-in view. 放大视图应分组显示个别数据项。The zoomed-in view should display the individual data items in groups. 此示例介绍如何在具有图像和文本的网格中显示项目。This example shows how to display the items in a grid with an image and text.

<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 资源中定义了组标头的外观。The look of the group headers is defined in the ZoomedInGroupHeaderTemplate resource. ZoomedInTemplate 资源中定义了项目的外观。The look of the items is defined in the ZoomedInTemplate resource.

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

定义放大视图Define the zoomed-out view

此 XAML 为缩小视图定义 ListView 控件。This XAML defines a ListView control for the zoomed-out view. 此示例介绍如何在列表中将组标头显示为文本。This example shows how to display the group headers as text in a list.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}" 
              SelectionMode="None" 
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

ZoomedOutTemplate 资源中定义了外观。The look is defined in the ZoomedOutTemplate resource.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}" 
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

同步视图Synchronize the views

放大视图和缩小视图应该同步,因此如果用户在缩小视图中选择某个组,则此相同组的详细信息应该显示在放大视图中。The zoomed-in view and zoomed-out view should be synchronized, so if a user selects a group in the zoomed-out view, the details of that same group are shown in the zoomed-in view. 你可以使用 CollectionViewSource 或添加代码以同步视图。You can use a CollectionViewSource or add code to synchronize the views.

绑定到同一 CollectionViewSource 的所有控件始终具有相同的当前项。Any controls that you bind to the same CollectionViewSource always have the same current item. 如果这两个视图使用同一 CollectionViewSource 作为它们的数据源,CollectionViewSource 将自动同步视图。If both views use the same CollectionViewSource as their data source, the CollectionViewSource synchronizes the views automatically. 有关详细信息,请参阅 CollectionViewSourceFor more info, see CollectionViewSource.

如果你不使用 CollectionViewSource 同步视图,则应该处理 ViewChangeStarted 事件并在事件处理程序中同步项目,如下所示。If you don't use a CollectionViewSource to synchronize the views, you should handle the ViewChangeStarted event and synchronize the items in the event handler, as shown here.

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

建议Recommendations

  • 在你的应用中使用语义式缩放时,请确保项目布局和平移方向不会根据缩放级别而更改。When using semantic zoom in your app, be sure that the item layout and panning direction don't change based on the zoom level. 布局和平移交互应该在各个缩放级别上保持一致且可预测。Layouts and panning interactions should be consistent and predictable across zoom levels.
  • 语义式缩放支持用户快速跳转到内容,因此请将缩小模式中的页面/屏幕数限制为三个。Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. 过多的平移会减少语义式缩放的实用性。Too much panning diminishes the practicality of semantic zoom.
  • 避免使用语义式缩放来更改内容的范围。Avoid using semantic zoom to change the scope of the content. 例如,相册不应在文件资源管理器中切换为文件夹视图。For example, a photo album shouldn't switch to a folder view in File Explorer.
  • 使用视图中必不可少的结构和语义。Use a structure and semantics that are essential to the view.
  • 对分组集合中的项使用组名称。Use group names for items in a grouped collection.
  • 对未分组但已排序的集合使用分类排序(例如,按日期时间先后排序或按名称列表字母排序)。Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.

获取示例代码Get the sample code