第 2 步 - 可视化焦点¶
在此步骤中，通过更改以下内容的外观来可视化应用程序列表中的关键焦点：
具有键焦点的列表项。
包含具有键焦点的项目的列表。
设置聚焦节点的外观¶
在本节中，您可以通过更改聚焦列表项的外观来在应用程序列表中可视化焦点。
要设置聚焦节点的外观：
在 Preview 中，转到 Media 屏幕。
Media 屏幕包含 Grid List Box 节点，默认情况下它们是焦点范围。这意味着当键盘焦点移动到 List Box 节点时，该节点会将焦点转发到其第一个可聚焦的子节点。在这些 List Box 节点中，每个列表项是一个 Button，并且 Button 节点默认情况下是可聚焦的。
虽然您可以在列表项之间移动键焦点，但您还无法看到键焦点的位置。
在 Prefabs 中，选择 AlbumItem 预设。在 State Tools 中，点击 Create State Manager。
Kanzi Studio 创建一个状态管理器并将其分配给 AlbumItem 预设。
双击 Create State 以创建两个状态，并将它们命名为 NotFocused 和 Focused。
单击 <No Controller Property> 并选择 Focus > Focused 属性。
只读 Focused 属性指示节点是否为关键焦点节点。关键焦点节点是当前接收键输入的节点。Kanzi 应用程序一次只能有一个关键焦点节点。
在 Focused 状态下，将 Focused 控制器属性的值设置为 True。
使用此状态定义键焦点节点的外观。
定义节点在 Focused 状态下的外观：
在 Prefabs 中，选择 AlbumItem > Background > Label 节点。
在 Properties 中，添加并设置：
Foreground Brush 到 Blue Brush
Font Weight 到 Normal
在 Focused 状态中的 State Tools 中，单击 Set 以将这些属性的值保存到该状态。
在 State Tools 中，右键单击 Any -> Any 并选择 Delete。
您移除默认过渡，以便状态管理器在 NotFocused 和 Focused 状态之间即时切换。
单击 Edit State Manager 以停用状态工具。
现在，在 Preview 中，已聚焦的专辑项显示为蓝色，并使用正常字体粗细。
在 Library > State Managers 中，将 AlbumItem State Manager 重命名为 List Item State Manager。
在 Prefabs 中，选择 PlaylistItem、RadioItem 和 SettingsItem 预设。在 Properties 中，添加 Resources > State Manager 属性，并将其设置为 List Item State Manager。
通过这种方式，您可以将应用程序中的所有列表设置为使用 List Item State Manager 来更改具有键焦点的项目的外观。
选择 Preview 窗口后，您可以使用以下默认键盘键在列表中移动键焦点：
↓ （下）移到下一个可聚焦项
↑ （上）移到上一个可聚焦项
Home 和 End 移到第一项和最后一项
Page Up 和 Page Down 移到列表可见区域的开始和结束位置
在 List Box 节点中，键焦点和项选择默认是同步的。当键焦点移动到列表项时，Kanzi 将该列表项设置为选中。
现在，当您在列表项之间移动键焦点时：
接收键输入的项目的标签变为蓝色，并使用正常字体粗细。
所有其他项目的标签是灰色的，并使用细字体。
在 Media 屏幕上，您可以使用以下默认键盘键在列表之间导航键焦点：
Tab 向右移到焦点链中的下一个列表
Shift Tab 向左移到焦点链中的上一个列表
小技巧
在本教程步骤中，您使用默认键盘键在列表之间导航键焦点。要设置其他键来导航键焦点：
在 Media 预设件中，创建 Navigation Manipulator，并将 Left Navigation Key 和 Right Navigation Key 设置为您要使用的键。
为向左和向右导航创建 Key Navigation Started 触发器和条件。使用 Focus: Move Scope Focus Backward 和 Focus: Move Scope Focus Forward 动作来移动焦点。
在本教程项目中，每个列表项预设都有一个 Button: Click 触发器和一个 Write Log 动作，用于将消息打印到日志中。当一个 Button 节点具有键焦点时，您可以使用 Enter 或 Space 键来按下该按钮。这将触发 Button: Click 触发器。例如，当专辑列表中的第三项具有键焦点时，您按下 Enter 键，Kanzi 将打印到 Log 窗口 Play album "Float"。
将键焦点设置到用户按下的列表项。¶
要将键焦点设置到用户按下的列表项：
在 Prefabs 中，选择这些预设：
AlbumItem
PlaylistItem
RadioItem
SettingsItem
这些预设是 Button 节点。交互控制节点，例如 Button 和 Slider 节点，默认情况下是可命中测试和可聚焦的，这意味着它们默认情况下可以接收键盘焦点和按压。
在 Properties 中，添加 Focus > Focus On Press 属性并将其设置为 Node。
通过这种方式，您可以将关键焦点从应用程序中的任何位置移动到用户按下的列表项。
小技巧
一个节点从其父节点继承 Focus On Press 属性的值。例如，要将应用程序屏幕中的所有交互节点设置为在按下时接收焦点，只需在该应用程序屏幕的根节点中设置 Focus On Press 属性。
现在，当您单击列表项时，该项将获得键焦点。
显示列表何时包含键焦点¶
在本节中，您将在 Media 和 Settings 屏幕上设置列表，以根据它们是否包含具有关键焦点的项目来更改外观。您可以使用本教程起始项目中附带的 List State Manager 来实现此目的。
List State Manager 使用其控制器属性 Focus State 属性，该属性指示焦点范围内一个或多个节点的焦点状态。
对于焦点范围，Focus State 属性的值具有以下含义：
No Focus：焦点范围内的节点都没有获得焦点。
Logical Focus：焦点范围中的节点是该范围所属覆盖的逻辑焦点节点。默认情况下，Kanzi 应用程序有一个覆盖，即 Screen 节点。
Key Focus：焦点范围内的节点是关键焦点节点，它接收键输入。
要显示列表何时包含键焦点：
在 Prefabs 中，选择：
MediaList 预设。
在 Media Activity 预设中，Albums、Playlists 和 Radio 是 MediaList 预设的实例。
Settings > SettingsFrame 节点。
这些节点是 Content Layout 2D 节点，已设置 Horizontal Padding 和 Vertical Padding 属性，以在其子节点周围创建边框。此边框不可见，因为 MediaList 和 SettingsFrame 节点没有背景画刷。
在 Properties 中，添加并设置：
Focus Scope > Focus Scope Type 到 Group
您将节点设为焦点范围，以便您可以使用 Focus State 属性来确定后代节点是否为关键焦点节点。
Resources > State Manager 到 List State Manager
List State Manager 设置节点的 Background Brush 属性：
在 KeyFocus 状态下，使用 Blue Brush 颜色画笔。
在 NoFocus 和 LogicalFocus 状态下，使用 White Brush 颜色画笔。
现在，包含键焦点的列表具有蓝色边框。
要将焦点设置到列表，可以：
使用 Tab 和 Shift Tab 键移动焦点。
点击该列表中的某一项。
在 Prefabs 中，选择 Media Activity 预设件。在 Properties 中，添加并启用 Focus Scope > Cyclic Focus Navigation 属性。
如此一来：
当您使用 Tab 键向前导航，并且焦点到达最后一个列表时，焦点将移到第一个列表。
当您按下 Shift Tab 键向后导航，并且焦点到达第一个列表时，焦点将移回到最后一个列表。
接下来该做什么？¶
在本教程中，您学习了如何为您的应用程序创建 UI 导航。
现在您可以：
了解如何使用 Kanzi 输入操控器来启用平移、缩放、旋转、重置位置以及在地图上放置图钉。请参阅 教程：平移、缩放、轻触。
学习如何使用拖放操纵器重新排列导航栏中的按钮。请参阅 教程：拖放。
了解如何使用 Grid List Box 创建联系人列表。请参阅 教程：使用 Grid List Box 创建联系人列表。。
了解如何定义 XML 数据源以及如何在 Kanzi Studio 项目中使用该数据源中的数据，以便为 Kanzi 应用程序提供数据。请参阅 教程：从数据源获取应用程序数据。
另请参阅¶
要了解有关使用 List Box 节点的更多信息，请参阅 List Box nodes。
要了解有关 Kanzi 状态管理器的更多信息，请参阅 状态机 (State Manager)。
要了解有关 Content Layout 节点的更多信息，请参阅 使用 Content Layout 节点。