列表/细节模式

列表/详细信息模式具有列表窗格(通常包含 列表视图)和内容的详细信息窗格。 选中列表中的项后,将更新详细信息窗格。 此模式通常用于电子邮件和通讯簿。

重要 APIListView 类SplitView 类

列表详细信息模式示例

小窍门

如果想要使用实现此模式的 XAML 控件,建议从 Windows 社区工具包使用 ListDetailsView XAML 控件

这是正确的模式吗?

列表/详情模式很有效,如果您想要:

  • 构建基于列表详细信息布局的电子邮件应用、通讯簿或任何应用。
  • 找到并设置大量内容的优先级。
  • 允许快速添加和删除列表中的项,同时在上下文之间来回工作。

选择正确的样式

实现列表/详细信息模式时,建议根据可用屏幕空间量使用堆叠样式或并排样式。

可用窗口宽度 建议的样式
320 epx-640 epx 堆叠
641 epx 或更宽 并排

堆叠样式

在堆叠样式中,一次只显示一个窗格:列表或详细信息。

堆叠模式下的列表详细信息

用户从列表窗格开始,然后通过选择列表中的项来“向下钻取”到详细信息窗格。 向用户显示列表和详细信息视图似乎存在于两个单独的页面上。

创建堆叠列表/详细信息模式

创建堆叠列表/详细信息模式的一种方法是对列表窗格和详细信息窗格使用单独的页面。 将列表视图放在一页上,并将详细信息窗格放在单独的页面上。

堆叠样式列表详细信息的组件

对于列表视图页, 列表视图 控件适用于显示可包含图像和文本的列表。

对于详细信息视图页,请使用最有意义的 内容元素 。 如果你有大量单独的字段,请考虑使用 网格 布局将元素排列成窗体。

有关页面之间的导航,请参阅 Windows 应用的导航历史记录和向后导航

并列格式

在并排样式中,列表窗格和详细信息窗格同时可见。

列表/细节模式

列表窗格中的列表具有一个选择视觉对象,用于指示当前选定的项。 在列表中选择新项会更新详细信息窗格。

创建并排列表/详细信息模式

创建并排列表/详细信息模式的一种方法是使用 拆分视图 控件。 将列表视图放在拆分视图窗格中,并将详细信息视图放在拆分视图内容中。

列表详细分割视图部件

对于列表窗格, 列表视图 控件适用于显示可以包含图像和文本的列表。

对于详细信息内容,请使用最有意义的 内容元素 。 如果你有大量单独的字段,请考虑使用 网格 布局将元素排列成窗体。

自适应布局

若要为任何屏幕大小实现列表/细节模式,请使用 自适应布局创建响应式 UI。

自适应详细列表布局

创建自适应列表/详细信息模式

若要创建自适应布局,请为 UI 定义不同的 VisualStates ,并使用 AdaptiveTriggers 为不同状态声明断点。

获取示例代码

以下示例使用自适应布局实现列表/详细信息模式,并演示与静态、数据库和联机资源的数据绑定:

小窍门

如果想要使用实现此模式的 XAML 控件,建议从 Windows 社区工具包使用 ListDetailsView XAML 控件