步骤 1 - 创建联系人列表并从数据源获取联系人¶

在本教程的此步骤中，您首先创建 Grid List Box 节点，将其用作联系人列表。然后，您设置 Grid List Box 从数据源接收联系人数据。

获取教程¶

要获取该教程，请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 List box 教程旁点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：

位于 <KanziWorkspace>/Tutorials/List box/Start/Tool_project 目录中的教程起点工程。
位于 <KanziWorkspace>/Tutorials/List box/Completed 目录中的已完成教程。

本教程依赖于数据源教程中的插件。

要获取数据源教程，请在 Kanzi Studio Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Data sources 教程旁边，点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。

起始项目的内容¶

起点工程包含您完成本教程所需的内容：

Container 节点为联系人列表设置背景。
ContactItem 预设定义了每个联系人条目的初始布局。
- ContactPhoto 节点显示联系人的照片。
- ContactName 节点显示联系人的姓名。
您可以在 Prefabs 窗口中找到 ContactItem 节点。
XML data source 数据源插件，您可以使用它从 XML 文件中获取联系人条目的数据。此插件使用 ContactsList.xml 文件作为本教程中联系人条目的数据源。您可以在 Application/bin 目录中找到 ContactsList.xml 文件。

要查看 Data Sources 窗口，在 Kanzi Studio 主菜单中选择 Window > Data Sources。

创建一个 Grid List Box 节点。¶

在本节中，您将创建用于显示联系人列表的 Grid List Box 节点。

要创建 Grid List Box 节点：

在 Kanzi Studio 的 Quick Start 窗口中，点击 Projects 并选择 Tutorials 选项卡。在 List box 教程旁，点击 Open 并选择 Start project。
在 Node Tree 中按 Alt 并右键单击 RootNode > Container 节点，选择 Grid List Box 2D，并将其命名为 ContactsList。
在 Node Tree 中选择 ContactsList 节点，在 Properties 中添加 Item Template 属性，并将其设置为 ContactItem。

使用 Item Template 属性，您可以设置要为其列表中的项目使用哪个预设模板的 Grid List Box 节点。

从数据源获取 List Box 项目。¶

在本节中，您使用数据源填充在上一节中创建的 ContactsList。

在 Kanzi 中，List Box 节点使用虚拟化来帮助您管理应用程序中的内存消耗。通过使用虚拟化，List Box 节点仅在内存中保留可见的项目以及您在 Keep Alive Item Count 属性中设置的项目数量。当用户滚动 List Box 节点时，该节点会加载新项目并移除不再需要保留在内存中的项目。

虽然您可以手动将项目添加到 List Box 节点，但仅在具有少量静态项目的列表和原型设计时使用该方法。要在 List Box 节点中显示可变数量的项目，请始终使用数据源来填充 List Box 节点。

要从数据源获取 List Box 项：

在 Node Tree 中选择 ContactsList 节点，在 Properties 中添加 Data Context 属性，并将其设置为 XML data source。

通过设置 Data Context 属性，您可以告知应用程序从哪个数据源接收数据。
在主菜单中选择 Window > Data Sources。

使用 Data Sources 窗口管理项目中的数据源。
在 Node Tree 中选择 ContactsList 节点，从 Data Sources 窗口将 XML data source > contacts 数据对象拖到 Properties 的 Items Source 属性。

Items Source 属性设置提供节点显示的项目数据的来源。
在 Prefabs 中选择 ContactItem > ContactPhoto 节点，从 Data Sources 窗口中将 XML data source > contacts > Item > contact > photo 数据对象拖到 Properties 的 Image 属性。

数据对象为联系人列表中的每个联系人项提供照片。

当您将数据对象拖动到具有单个字段的属性时，Kanzi Studio 会创建一个绑定，将该属性的值绑定到您拖动到该属性的数据对象。

ContactPhoto 节点的 Image 属性的值现在来自 XML data source photo 数据对象。
对 ContactItem > ContactName 节点重复上一步，但将 XML data source > contacts > Item > contact > name 数据对象拖到 Text 属性。

数据对象为联系人列表中的每个联系人项提供名称。

ContactsList 节点现在使用 XML data source 数据源从 ContactsList.xml 接收联系人项目的照片和姓名。在 Preview 中，您可以看到联系人数据。

设置 Grid List Box 节点的布局。¶

在本节中，您将为 ContactsList 节点设置布局，并设置列表项的大小以在应用程序中呈现内容。

要定义列表框内容的布局，请在 Node Tree 中选择 ContactsList 节点，并在 Properties 中添加和设置：

Cell Width 到 400。
Cell Height 到 45

您在 Grid List Box 节点中设置为每个项目保留的区域。如果项目不适合单元格，节点会将其裁剪。
Layout Width 到 400
Layout Height 到 360

您设置了 Grid List Box 节点中项目可见的区域。如果 Grid List Box 节点中的所有项目都不适合此区域，节点将裁剪那些不适合的项目。用户可以滚动 Grid List Box 节点以访问所有项目。
Horizontal Alignment 到 Center

通过这种方式，您可以将 ContactsList 节点水平对齐到 Container 节点的中心。