列表/细节模式

  • 项目

列表/细节模式具有一个列表窗格（通常带有列表视图）和一个内容细节窗格。 当选择列表中的项时，将会更新细节窗格。 此模式通常用于电子邮件和通讯簿。

重要的 API：ListView 类、SplitView 类

列表-细节模式的示例

提示

如果要使用为你实现此模式的 XAML 控件，则建议使用 Windows 社区工具包中的 ListDetailsView XAML 控件。

这是正确的模式吗？

如果希望进行以下操作，则适用列表/细节模式：

  • 生成电子邮件应用、通讯簿或任何基于列表-细节布局的应用。
  • 定位并设置大型内容集合的优先级。
  • 允许从列表中快速添加和删除项，并在上下文之间反复执行操作。

选择正确的样式

在实现列表/细节模式时，我们建议根据可用屏幕空间量使用堆叠样式或并排样式。

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

堆叠样式

在堆叠样式中，一次只有一个窗格可见：列表窗格或细节窗格。

堆叠模式下的列表细节

用户从列表窗格开始，然后通过在列表中选择一个项来“深入”到细节窗格。 对用户来说，它表现为列表和细节视图存在于两个单独的页面上。

创建堆叠的列表/细节模式

创建堆叠的列表/细节模式的一种方法是为列表窗格和细节窗格使用单独的页面。 将列表视图放在一个页面上，细节窗格放在一个单独的页面上。

堆叠样式列表细节的各个部分

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

对于细节视图页面，使用内容元素最为合理。 如果你有大量的单独字段，请考虑使用网格布局将元素排列为一个表单 。

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

并排样式

在并排样式中，列表窗格和细节窗格同时可见。

列表/细节模式

列表模式中的列表具有一个选项视觉对象，用于指示当前选定的项。 在列表中选择一个新项将更新细节窗格。

创建并排列表/细节模式

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

列表细节拆分视图的各个部分

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

对于细节内容，使用内容元素最为合理。 如果你有大量的单独字段，请考虑使用网格布局将元素排列为一个表单 。

自适应布局

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

自适应列表细节布局

创建自适应列表/细节模式

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

获取示例代码

以下示例使用自适应布局实现列表/细节模式并演示到静态数据、数据库和在线资源的数据绑定：

提示

如果要使用为你实现此模式的 XAML 控件，则建议使用 Windows 社区工具包中的 ListDetailsView XAML 控件。