创建“列表-细节”数据绑定

列表-细节设计包括两个部分：

• 用于显示项列表（通常为数据集合）的列表视图。

• 用于显示有关列表中所选项的详细信息的细节视图。

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

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

• 在“列表模式”中，您从“数据”面板中拖出的项将创建列表视图。您可以将项拖到 ListBox 、 DataGrid 或 TreeView 控件上。如果将项拖到美工板的空白区域上，则会自动创建一个 ListBox 。

• 在“详细信息模式”中，您从“数据”面板中拖出的项将在 Grid 版式面板中创建细节视图。或者，您可以创建另一个版式面板（例如 Canvas 版式面板），并将项拖到该版式面板上。

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

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

自动创建列表-细节数据绑定

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

   有关详细信息，请参阅生成示例数据。

2. 在“数据”面板中，单击“列表模式”。

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

3. 在“数据”面板中，将一个或多个属性从数据集合内拖到美工板上（以创建 ListBox 对象），或拖到现有的 ListBox  、 DataGrid   或 TreeView   对象上。

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

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

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

   

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

   

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

   

4. 在“数据”面板中，单击“详细信息模式”。

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

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

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

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

   

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

   

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

   

6. 按 F5 以测试应用程序。单击列表视图中的项以查看相应更新的细节视图。

   在列表控件中选择项以更新其细节视图

   

此过程演示了如何创建深度为两个级别的列表-细节视图。您也可以创建深度为三个级别的列表-细节视图。

有关详细信息，请参阅动手试验：创建深度为三个级别的“列表-细节”绑定。

手动创建列表-细节数据绑定

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

   有关详细信息，请参阅生成示例数据。

2. 在“工具”面板中，选择要用于显示列表视图的控件（例如“ComboBox”），并在美工板上绘制该控件。

3. 在“对象和时间线”面板中，右键单击新对象，单击“重命名”，键入新名称，然后按 Enter。

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

4. 在“数据”面板中，单击“列表模式”。

5. 在“数据”面板中，将一个或多个属性从数据集合内拖到列表对象上。

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

   

6. 在“数据”面板中，单击“详细信息模式”。

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

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

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

   

8. 按 F5 以测试应用程序。如果在列表对象中选择不同的项时未更新细节视图，请继续执行下一步。

9. 选择表示细节视图的版式面板（通常为 Grid 对象）。

10. 在“属性”面板中的 DataContext 属性旁，单击“高级选项”，然后单击“数据绑定”。

11. 在“创建数据绑定”对话框中，单击“元素属性”选项卡。

12. 在“场景元素”下，选择列表对象，然后在“属性”下选择 SelectedItem 属性。

    创建细节对象和列表对象之间的关系

    

13. 单击“确定”以关闭“创建数据绑定”对话框。

    细节版式面板中的所有子项都将使用列表对象的选定项的数据上下文。

14. 验证细节版式面板的子项是否已绑定到相关的数据属性。某些子项不会绑定到数据，因为它们只显示数据属性的名称。其他子项应绑定数据，因为它们显示与列表对象中的选定项关联的数据。例如，选择不显示数据属性名称的某个 TextBlock 子项，然后，在“属性”面板中查找 Text 属性。如果属性周围没有黄色的范围框，则 TextBlock 对象未绑定数据。绑定 TextBlock 对象：

    1. 单击 Text 属性旁边的“高级选项”，然后单击“数据绑定”。

    2. 在“创建数据绑定”对话框中，单击“显式数据上下文”选项卡。

    3. 在“字段”下，展开“集合”，然后选择要显示在此 TextBlock 对象中的数据属性。

       

    4. 单击“确定”以关闭“创建数据绑定”对话框。

       Text 属性周围的黄色范围框指明该属性现在已绑定了数据。

       

15. 按 F5 以测试应用程序。

另请参阅

任务

使用 DataGrid 控件
使用 TreeView 控件

概念

设置显示数据的控件的样式

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。