使用 List Box Item Container 预设¶

使用 List Box Item Container 预设来设置 List Box 节点中项目的外观和行为。例如，使用 List Box Item Container 预设为 List Box 项目添加装饰元素或更改当前选定项目的外观。

../../_images/list-box-item-container.gif

通过完成教程，了解如何使用 List Box Item Container 2D 预设来设置 Grid List Box 2D 节点中所选项目的外观。请参阅教程：使用 Grid List Box 创建联系人列表。。

有关如何使用 List Box Item Container 3D 预设件设置 Trajectory List Box 3D 节点中所选项目外观的示例，请参阅轨迹列表框示例。

创建 List Box Item Container 预设¶

要创建一个 List Box Item Container 预设：

在 Prefabs 中，点击并选择 List Box Item Container 2D 或 List Box Item Container 3D。List Box Item Container 必须始终是一个预设。请参阅使用节点预设。

使用 List Box Item Container 2D 与 Grid List Box 2D 节点，并使用 List Box Item Container 3D 与 Grid List Box 3D 和 Trajectory List Box 3D 节点。请参阅使用 Grid List Box 节点和使用 Trajectory List Box 3D 节点。
在 Node Tree 中，选择要与 List Box Item Container 一起使用的 List Box 节点。在 Properties 中，添加 List Box > Item Container Template 属性，并将其设置为您创建的 List Box Item Container 预设。

Item Container Template 属性允许您在 List Box 节点中的项目之间共享功能。当您设置 Item Container Template 属性时，List Box 节点中的每个项目都会从 List Box Item Container 预设中继承功能。默认情况下，Kanzi 将列表框项目作为 List Box Item Container 预设的子节点放置。
要使 List Box Item Container 2D 预设拉伸到 Grid List Box 2D 节点的单元格大小，请添加并将 Horizontal Alignment 和 Vertical Alignment 属性设置为 Stretch。
在 List Box Item Container 预设中，设置所有 List Box 项目通用的功能和装饰。例如，您可以：
- 在 List Box Item Container 预设的节点树中设置列表框项的位置。请参阅在 List Box Item Container 中设置 List Box 项目的放置位置。。
- 设置所选列表框项的外观。请参阅使用 List Box Item Container 设置 List Box 中所选项目的外观。。
List Box Item Container 预设默认情况下是一个焦点组，并处理键焦点和键输入。这使得 Kanzi 能够在使用 List Box Item Container 的 List Box 节点中同步项目选择和键焦点。请参阅在 List Box 节点中处理键焦点。。

在 List Box Item Container 中设置 List Box 项目的放置位置。¶

当您将 List Box Item Container 预设设置为 List Box 节点的 Item Container Template 时，Kanzi 默认情况下将列表框项作为 List Box Item Container 预设的子节点放置。您可以在 List Box Item Container 预设中设置一个 Content Layout 节点作为列表框项的根节点。

要设置 List Box Item Container 中 List Box 项目的放置位置：

创建一个 List Box Item Container 预设。请参阅创建 List Box Item Container 预设。
在 List Box Item Container 预设中，创建您要用于定义列表框项目外观的节点，以及一个您用作列表框项目根节点的 Content Layout 节点。
创建一个别名，Kanzi 用于告知 List Box Item Container 预设使用哪个 Content Layout 节点作为列表框项的根节点：
1. 在 Prefabs 中，选择 List Box Item Container 预设。在 Dictionaries 中，点击 + Add Resource，并选择 Create > Alias。
  
  通过这种方式，您在 List Box Item Container 2D 的资源字典中创建了一个别名。
2. 将别名命名为 $layout，并将其设置为指向您要用作列表框项根节点的 Content Layout 节点。
  
  通过这种方式，您将 Kanzi 设置为将列表框项放置在 Content Layout 节点中。如果您未指定 $layout 别名，Kanzi 会将列表框项作为 List Box Item Container 预设的最后一个子节点放置。

使用 List Box Item Container 设置 List Box 中所选项目的外观。¶

您可以使用 List Box Item Container 预设来更改 List Box 节点中当前选定项目的外观。例如，要突出显示选定的项目，您可以使其比其他项目稍大或更改其背景颜色。

要使用 List Box Item Container 设置 List Box 中所选项目的外观：

创建一个 List Box Item Container 预设，并将其设置为 List Box 节点的 Item Container Template。请参阅创建 List Box Item Container 预设。

例如：
1. 创建一个 List Box Item Container 2D 预设，并将其设置为展示地址簿联系人的 Grid List Box 2D 节点的 Item Container Template。
2. 在 Prefabs 中，选择 List Box Item Container 2D 预设。在 Properties 中，添加 Horizontal Alignment 和 Vertical Alignment 属性，并将它们设置为 Stretch。
  
  通过这种方式，您可以使 List Box Item Container 2D 预设拉伸到 Grid List Box 2D 节点的单元格大小。
在 Prefabs 中，选择 List Box Item Container 预设。在 State Tools 中，创建一个具有两个状态的 State Manager。请参阅使用状态机。

例如，将一个状态命名为 NotSelected，另一个命名为 Selected。

Selected 状态定义了当列表框中的项目被选中时应用程序的状态，NotSelected 状态定义了项目未被选中时的状态。
在 State Tools 中，点击 <No Controller Property>，选择 List Box Item Container > Selected 属性，并将 Selected 状态的控制器属性值设置为 True。

在状态管理器中，您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。
在 Prefabs 中，选择 List Box Item Container 预设。在 Properties 中，添加并设置在选择列表框项时要更改其值的属性。将属性的不同值保存到每个状态。您还可以向 List Box Item Container 预设添加节点，并使它们仅对选定的项目可见。

例如，要更改所选列表框项的背景颜色，请添加 Background Brush 属性，并将其设置为您想要用于填充所选列表框项背景的颜色画笔。在 State Tools 中，单击 Selected 状态下的以将属性值保存到该状态。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。

在 Preview 中，当您单击 List Box 节点中的某个项目以选择它时，其外观会发生变化。

../../_images/contacts-list-item-selected.png

为 List Box 项目启用双击手势¶

当您向 List Box 节点添加支持双击手势的项目时，必须在 List Box Item Container 预设中为这些项目启用双击手势。

要了解如何为节点启用双击手势，请参阅为节点启用多击手势。

要为 List Box 项启用双击手势：

创建一个 List Box Item Container 预设，并将其设置为 List Box 节点的 Item Container Template。请参阅创建 List Box Item Container 预设。
在 Prefabs 中，选择 List Box Item Container 预设。在 Properties 中，添加并启用 Input > Double-Click Enabled 属性。

当您启用 Double-Click Enabled 属性时，Kanzi 在 List Box Item Container 预设中安装一个可生成双击消息的多击操纵器。