列表视图和网格视图指南

[此文章包含特定于 UWP 应用和 Windows 10 的信息。有关 Windows 8.1 指南,请下载 Windows 8.1 指南 PDF。]

列表提供一致的、触摸优化的方法,用于显示基于集合的应用内容并与之交互。列表视图和网格视图控件可以帮助你有效地显示列表。借助列表视图和网格视图控件,你可以将项目分类并为之分配组标头、拖放项目、规划内容以及对项目进行重新排序。

列表视图还是网格视图?

尽管列表视图和网格视图具有类似的功能,但它们的用途不同。

列表视图建议用于:

  • 显示主要为文本的内容集合。
  • 对单个或已分类的内容集合的导航。
  • 在大纲/细节模式下创建大纲窗格。大纲/细节是常用于电子邮件应用的模式,在该模式中,一个窗格具有一个包含可选项的列表,而另一个窗格具有一个包含选定项的详细视图。有关此视图的示例,请参阅本文中的选择正确的模式。

列表布局包含组标题、显示为单列、阅读顺序为从上到下,并可以垂直平移或滚动。

具有四种主要单位类型的列表视图示例

网格视图建议用于:

  • 显示主要为图像的内容集合。
  • 显示内容库。有关此视图的示例,请参阅本文中的选择正确的模式。
  • 设置与语义式缩放相关联的两个内容视图的格式。

网格布局垂直平移,项目按照从左到右再从上到下的阅读顺序进行布局。

网格视图布局的示例

选择正确的模式

列表用于显示内容库、大纲/细节数据或静态数据。

  • 内容库

    使用内容库显示内容的集合或库。 在呈现诸如图片和视频等媒体时,通常使用此模式。在内容库中,用户期待点击项目就能够激活操作。

    内容库示例

     

  • 大纲/细节数据

    使用大纲/细节模式时,你可以使用列表视图组织大纲窗格。大纲窗格显示一个可选项列表。当用户在大纲窗格中选择某个项目时,所选项目的其他信息会显示在细节窗格中。细节窗格通常包含一个网格视图。

    大纲细节模式的示例

     

    你可以将多个列表链在一起,创建复杂的大纲/细节层次结构。有关详细信息,请参阅大纲/细节模式

  • 静态数据

    静态数据仅用于呈现非交互式内容,因为大多数类型的交互内容处于禁用状态。 对于只读且无法激活或导航到其中的项目集合,此模式非常有用。

选择模式

此模式允许用户选择项目并对项目执行操作。可以通过上下文菜单调用此模式,方法是在项目上按 CTRL+单击或按 SHIFT+单击,或者在库视图中的项目上滚动选择目标。

有三种不同的选择模式:

  • 单选 - 用户一次只能选择一个项目。
  • 多选 - 用户无需修改键即可选择多个项目。
  • 扩展 - 用户可以使用修改键选择多个项目,例如长按 SHIFT 键。

当选择模式处于活动状态时,每个列表项旁边都将显示复选框,而操作可以显示在屏幕的顶部或底部。

在项目上点击任意位置都可将其选中。点击命令栏操作会影响所有选定项。如果没有选择任何项目,命令栏操作应处于非活动状态,除了“全选”。

选择模式没有弱解除模型;在选择模式处于活动状态的框架之外点击不会取消该模式。这是为了防止意外停用该模式。单击“后退”按钮关闭多选模式。

在选择相应的操作后,应该出现可见确认。在适当的时候显示动画。请考虑为某些操作显示确认对话框,特别是诸如删除等破坏性操作。

选择模式仅限于它处于活动状态的页面,并不会影响该页面之外的任何项。

选择模式的入口点应对应于它所影响的内容。

有关命令栏建议,请参阅命令栏指南

多选模式

编辑模式支持对行项进行操作。可以通过命令栏中的编辑模式按钮或通过上下文菜单调用该模式。

多选模式的入口点应由它所修改的列表放置。

单击“后退”按钮关闭多选模式。通过进入编辑模式,可删除任何命令栏。如果其他框架在进入选择模式时可见,这些框架将变为烟灰色。

编辑模式没有弱解除模型;在选择模式处于活动状态的框架之外点击不会取消该模式。这是为了防止意外停用该模式。

编辑模式仅限于它处于活动状态的页面,并不会影响该页面之外的任何项。

建议

  • 同一个列表或网格视图中的项目应当具有相同的行为。
  • 如果你的列表划分为多个组,请使用语义式缩放,以使用户更轻松地通过导航浏览分组内容。

相关主题

中心

大纲/细节

导航窗格

语义式缩放