创建“大纲-细节”数据绑定

项目
10/11/2017

大纲-细节设计包括两个部分：

用于显示项列表（通常为数据集合）的大纲视图。
用于显示有关列表中所选项的详细信息的细节视图。

此用户指南就是大纲-细节设计的一个示例，其中目录为大纲视图，显示的主题为细节视图。

Microsoft Expression Blend 为“数据”面板提供以下两种模式，从而可以轻松地将数据添加到美工板的大纲-细节设计中：

在“列表模式”中，您从“数据”面板中拖出的项将创建大纲视图。您可以将项拖到“ListBox”、“DataGrid”或“TreeView”控件上。如果将项拖到美工板的空白区域上，则会自动创建一个“ListBox”。
在“详细信息模式”中，您从“数据”面板中拖出的项将在“网格”版式面板中创建细节视图。或者，您可以创建另一个版式面板（例如“画布”版式面板），并将项拖到该版式面板上。

Expression Blend 会将 Grid 对象的“DataContext”属性设置为用于显示大纲视图的对象的“SelectedItem”属性，从而在后台自动配置大纲视图和细节视图之间的关系。或者，也可以手动配置此关系。

提示：
Expression Blend 附带了一个示例，该示例演示简单的大纲-细节设计，并自定义大纲和细节对象的外观。若要在 Expression Blend 中打开该示例，请在“帮助”菜单上单击“欢迎屏幕”，单击“示例”选项卡，然后单击“ColorSwatchSL”。

自动创建大纲-细节数据绑定

如果没有可以使用的数据源，请创建一个示例数据源，并使其能够在运行时使用。

有关详细信息，请参阅生成示例数据。
在“数据”面板中，单击“列表模式”。

提示：

在“列表模式”中，您拖到美工板上的数据项会被假定为独立数据绑定或大纲视图的一部分。此模式是“数据”面板的默认模式。
在“数据”面板中，将一个或多个属性从数据集合内拖到美工板上（以创建 ListBox 对象），或拖到现有的“ListBox”、“DataGrid” 或“TreeView”对象上。

说明：

如果出现“创建数据绑定”对话框，则可能处于“详细信息模式”（而不是“列表模式”）中。

对象将显示每个属性的数据集合。

将“列表模式”中的数据拖到 ListBox 对象上

将“列表模式”中的数据拖到 DataGrid 对象上

将“列表模式”中的数据拖到 TreeView 对象上

提示：
在“列表模式”中，您拖到美工板上的数据项会被假定为独立数据绑定或大纲视图的一部分。此模式是“数据”面板的默认模式。

说明：
如果出现“创建数据绑定”对话框，则可能处于“详细信息模式”（而不是“列表模式”）中。

在“数据”面板中，单击“详细信息模式” Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ZH-CN,Expression.30).png 。

提示：
在“详细信息模式”中，您拖到美工板上的数据项会被假定为细节视图的一部分。将会创建一个 Grid 对象，以显示每个数据项的子对象。该 Grid 对象将自动配置为使用在“列表模式”中创建的上一个对象的数据上下文和选定项。

在“数据”面板中，将一个或多个属性从数据集合内拖到美工板上（以创建“网格”版式面板），或拖到现有的版式面板中。

版式面板将为每个属性的名称和值显示 TextBlock 控件。

在创建了 ListBox 绑定后拖动“详细信息模式”中的数据

在创建了 DataGrid 绑定后拖动“详细信息模式”中的数据

在创建了 TreeView 绑定后拖动“详细信息模式”中的数据
按 F5 以测试应用程序。单击大纲视图中的项以相应地查看细节视图更新。

在大纲控件中选择项以更新其细节视图

创建“大纲-细节”数据绑定

如果没有可以使用的数据源，请创建一个示例数据源，并使其能够在运行时使用。

有关详细信息，请参阅生成示例数据。
在“工具”面板中，选择要用于显示大纲视图的控件（例如“ComboBox”），并在美工板上绘制该控件。
在“对象和时间线”面板中，右键单击新对象，单击“重命名”，键入新名称，然后按 Enter。

提示：

创建对象时不会为对象指定显式名称。通过重命名对象，将创建一个可由细节视图对象的“DataContext”属性引用的名称。
在“数据”面板中，单击“列表模式”。
在“数据”面板中，将一个或多个属性从数据集合内拖到大纲对象上。

将“列表模式”中的数据拖到 ComboBox 对象上
在“数据”面板中，单击“详细信息模式”。
在“数据”面板中，将一个或多个属性从数据集合内拖到美工板上（以创建“网格”版式面板），或拖到现有的版式面板中。

版式面板将为每个属性的名称和值显示 TextBlock 控件。

在创建了 ComboBox 绑定后拖动“详细信息模式”中的数据
按 F5 以测试应用程序。如果在大纲对象中选择不同的项时未更新细节视图，请继续执行下一步。
选择表示细节视图的版式面板（通常为 Grid 对象）。
在“属性”面板中的“DataContext”属性旁，单击“高级属性选项”，然后单击“数据绑定”。
在“创建数据绑定”对话框中，单击“元素属性”选项卡。
在“场景元素”下，选择大纲对象，然后在“属性”下选择“SelectedItem”属性。

创建细节对象和大纲对象之间的关系
单击“确定”以关闭“创建数据绑定”对话框。

细节版式面板中的所有子项都将使用大纲对象的选定项的数据上下文。
验证细节版式面板的子项是否已绑定到相关的数据属性。某些子项不会绑定到数据，因为它们只显示数据属性的名称。其他子项应绑定数据，因为它们显示与大纲对象中的选定项关联的数据。例如，选择不显示数据属性名称的某个 TextBlock 子项，然后，在“属性”面板中查找“Text”属性。如果属性周围没有黄色的范围框，则 TextBlock 对象未绑定数据。绑定 TextBlock 对象：
1. 单击“Text”属性旁边的“高级属性选项”，然后单击“数据绑定”。
2. 在“创建数据绑定”对话框中，单击“显式数据上下文”选项卡。
3. 在“字段”下，展开“集合”，然后选择要显示在此 TextBlock 对象中的数据属性。
4. 单击“确定”以关闭“创建数据绑定”对话框。
  
  “Text”属性周围的黄色范围框指明该属性现在已绑定了数据。
按 F5 以测试应用程序。

提示：
创建对象时不会为对象指定显式名称。通过重命名对象，将创建一个可由细节视图对象的“DataContext”属性引用的名称。