第 2 步 - 可视化焦点¶
在此步骤中，通过更改以下内容的外观来可视化应用程序列表中的关键焦点：
具有键焦点的列表项。
包含具有键焦点的项目的列表。
最后，您为 Media 屏幕上的列表创建键导航。
设置聚焦节点的外观¶
在本节中，您可以通过更改聚焦列表项的外观来在应用程序列表中可视化焦点。
要设置聚焦节点的外观：
在 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 以停用状态工具。
在 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 窗口时，您可以使用这些默认键盘键浏览列表中的项目：
Tab 将键盘焦点移动到下一个可聚焦的项目。
Shift Tab 将键盘焦点移动到上一个可聚焦项。
↑ （向上）和 ↓ （向下）滚动项目。
Home 和 End 用于转到第一个和最后一个项目。
Page Up 和 Page Down 用于到达列表可见区域的开头和结尾。
默认情况下，Kanzi 会同步项目选择和键焦点在 List Box 节点中。当键焦点移动到列表项时，Kanzi 将该列表项设置为选中。
现在，当您在列表项之间移动键焦点时：
接收键输入的项目的标签变为蓝色，并使用正常字体粗细。
所有其他项目的标签是灰色的，并使用细字体。
在本教程项目中，每个列表项预设都有一个 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 颜色画笔。
现在，当您在 Preview 中单击列表中的某一项时，该列表会获得蓝色边框。
使用按键输入导航媒体列表。¶
在本节中，您为 Media 屏幕创建关键导航。您可以使用 ← (Left) 和 → (Right) 键使用户能够在列表之间导航。
要使用按键输入导航媒体列表：
在 Prefabs 中，选择 Media Activity 预设。在 Node Components 中，按 Alt 并右键单击 Input Manipulators 并选择 Navigation Manipulator。
在 Navigation Manipulator 中，添加并设置：
Left Navigation Key 到 Arrow left
Right Navigation Key 到 Arrow right
通过这种方式，您将 Navigation Manipulator 设置为响应 ← （左）和 → （右）键。
启用向左导航：
在 Node Components > Triggers 中，创建一个 Key Input > Key Navigation Started 消息触发器，并将其命名为 Left Navigation。
在 Left Navigation 触发器中，创建一个触发条件并设置：
A
Type of A 到 Message argument
Message Argument 到 Navigation Direction
Operation 到 =
B
Type of B 到 Fixed
Fixed Value 到 Left
在此条件下，当用户按下 ← (Left) 键时，您设置的 Left Navigation 触发器将被触发，该键在 Navigation Manipulator 中被设置为 Left Navigation Key。
在 Left Navigation 触发器中，按 Alt 并右键单击 Actions 并选择 Dispatch Message Action > Focus > Move Scope Focus Backward。
此操作将键焦点移动到 Media 活动中的上一个可聚焦节点，该节点是一个焦点范围。
启用向右导航：
在 Node Components > Triggers 中，创建一个 Key Input > Key Navigation Started 触发器，并将其命名为 Right Navigation。
从 Left Navigation 触发器中，将触发条件复制到 Right Navigation 触发器。在条件中，将 Fixed Value 设置为 Right。
在此条件下，当用户按下 → （右）键时，您设置的 Right Navigation 触发器将被触发，该键在 Navigation Manipulator 中被设置为 Right Navigation Key。
在 Right Navigation 触发器中，按 Alt 并右键单击 Actions 并选择 Dispatch Message Action > Focus > Move Scope Focus Forward。
此操作将键焦点移动到 Media Activity 中的下一个可聚焦节点。
在 Properties 中，添加并启用 Focus Scope > Cyclic Focus Navigation 属性。
如此一来：
当用户使用 → (Right) 键向前导航，并且焦点到达焦点范围的最后一个可聚焦节点时，焦点将移动到第一个可聚焦节点。
当用户按下 ← （左）键向后导航，并且焦点到达焦点范围的第一个可聚焦节点时，焦点将移回到最后一个可聚焦节点。
现在，当您在 Preview 中进入 Media 屏幕时，您可以使用 ← （左）和 → （右）键在列表之间移动键焦点。
接下来该做什么？¶
在本教程中，您学习了如何为您的应用程序创建 UI 导航。
现在您可以：
了解如何使用 Kanzi 输入操控器来启用平移、缩放、旋转、重置位置以及在地图上放置图钉。请参阅 教程：平移、缩放、轻触。
学习如何使用拖放操纵器重新排列导航栏中的按钮。请参阅 教程：拖放。
了解如何使用 Grid List Box 创建联系人列表。请参阅 教程：使用 Grid List Box 创建联系人列表。。
了解如何定义 XML 数据源以及如何在 Kanzi Studio 项目中使用该数据源中的数据，以便为 Kanzi 应用程序提供数据。请参阅 教程：从数据源获取应用程序数据。
另请参阅¶
要了解有关 Kanzi 状态管理器的更多信息，请参阅 状态机 (State Manager)。
要了解有关 Content Layout 节点的更多信息，请参阅 使用 Content Layout 节点。