步骤 1 - 为集群创建一个主题¶
在本教程的此步骤中，您将学习如何为集群创建主题。您将从一个包含圆形主仪表（速度和转速）和条形次要仪表（发动机温度和燃料）的集群的项目开始，并为该集群创建一个现代主题。
获取教程¶
要获取该教程，请在 Kanzi Studio Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Theming 教程旁边，点击 
。
Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：
位于
<KanziWorkspace>/Tutorials/Theming/Start/Tool_project目录中的教程起点工程。Tool_project目录包含 Kanzi Studio 项目，其中的用户界面是您创建主题的对象。Application目录包含一个空应用程序，您在本教程的第 3 步中使用它来使用户能够更改应用程序中的非烘焙主题。
位于
<KanziWorkspace>/Tutorials/Theming/Completed目录中的已完成教程。
起始项目的内容¶
起点工程包含您完成本教程所需的内容：
Library > Styles 包含您在本教程中用于创建主题的样式。您将在教程中使用每种样式时了解它。
要详细了解不同类型的样式以及如何创建它们，请参阅 使用 styles。
RootNode 节点包含仪表的控制属性。工程中的仪表绑定到 RootNode 节点中的这些属性。这样您就可以从工程中的单个节点控制仪表。
布局。在 Prefabs 中，您可以找到在本教程中创建主题所需的布局。
Primary gauges Classic 预设为 Classic 主题设置了集群速度和 RPM 仪表的布局。
这个预设件包含：
Background 节点包含集群背景。
Gauges 节点包含速度和转速表。
Car 节点指向包含该主题汽车模型的预设。
Primary gauges grid Classic 节点包含并定位与主仪表一起显示的内容：速度和 RPM 值，以及与主仪表一起显示的附加信息。
Primary gauges Modern 预设为 Modern 主题设置集群速度和转速表的布局。
这个预设件包含：
Gauges 节点包含速度和转速表以及仪表盘背景。
一个 Grid Layout 节点，用于定位在此主题中显示的主要仪表的内容 (Primary gauges grid Modern)，以及两个 Trajectory Layout 节点，用于将速度和 RPM 值定位在仪表上方。
Secondary gauges 预设为 Classic 和 Modern 主题设置了集群辅助仪表的布局。辅助仪表位于集群的底部。在 Hybrid 汽车变体主题中，辅助仪表显示电池和燃料仪表，而在 Gasoline 汽车变体主题中，它们显示发动机温度和燃料仪表。
这个预设件包含：
Gauges 节点包含两个次要仪表。
Secondary gauges grid Grid Layout 节点设置集群中次要仪表的布局。
用户界面元素。在 Prefabs 中，您可以找到在本教程中创建主题所需的用户界面元素。
Car Gasoline 预设包含在 Classic 主题的 Gasoline 汽车变体中显示在速度表和转速表之间的汽车模型。
Car Hybrid 预设包含在 Classic 主题的 Hybrid 汽车变体中显示在速度表和转速表之间的汽车模型。
Table Overview 预设包含在速度和 RPM 仪表之间的 Classic 主题中显示的内容。
Table RPM 预设包含在 RPM 仪表中显示的面板内容。
Table Speed 预设包含显示在速度计中的面板内容。
Theme selector 预设包含可用于更改此应用程序中非烘焙主题的控件。在本教程的最后一步中，您将了解导出主题的不同选项以及如何使用 Kanzi Engine API 更改应用程序主题。
创建组合仪表主题¶
在本节中，您将为集群创建 Classic 和 Modern 主题，并为主要仪表设置主题。您为每个主题使用单独的预设，因为两个主题之间集群外观和主要仪表布局的变化很大。本教程的起始项目已经包含了两个主题的预设，但您将了解 Theme Group 和 Theming 资源。您还将学习如何设置 Preview 显示哪个主题。
要创建组合仪表主题：
在 Kanzi Studio Quick Start 窗口中点击 Projects，然后选择 Tutorials 选项卡。在 Theming 教程旁边，点击 Open 并选择 Start project。
在 Node Tree 中选择 RootNode > Primary gauges Classic Prefab Placeholder 节点并将其删除。
您将此 Prefab Placeholder 节点替换为 Prefab View 节点。您必须使用 Prefab View 节点，以便可以动态更改预设。请参阅 使用节点预设。
在 Node Tree 中 按 Alt 并右键单击 RootNode，选择 Prefab View 2D 节点，将其命名为 Primary gauges，并移动它，使其成为 RootNode 节点的第一个子节点。
在 Node Tree 中，选择 Primary gauges Prefab View 2D 节点，并在 Properties 中添加并将 Prefab Template 属性设置为 Primary gauges Classic 预设。
在 Node Tree 中右键单击 Primary gauges 节点并选择 Add Resources to a Theme Group。
使用 Add Resources to a Theme Group 命令时，Kanzi Studio 使您能够将所有资源从选定节点及其树添加到主题组并创建一个主题。
在 Add Resources to a Theme Group 窗口中设置：
将 Theme Group 添加到您要添加资源的主题组。如果您还没有主题组，请选择 <Create New>。
主题组包含有关哪个主题使用哪些资源的信息。
将 Primary gauges.PrefabViewConcept.Prefab 资源 ID 重命名为 Primary gauges。
单击 Add。
使用 Add Resources to a Theme Group 窗口将资源添加到主题组时，Kanzi Studio：
如果项目尚未包含 Theme Group，则在 Library > Themes 中创建一个 Theme Group。
向主题组添加指向 Value 列中显示的资源或节点的资源 ID。
在此示例中，Primary gauges 资源 ID 指向 Primary gauges Classic 预设。
在将资源添加到 Theme Group 的节点中，将资源或节点的直接指针替换为资源 ID。
在此示例中，Kanzi Studio 将 Primary gauges Prefab View 2D 节点中 Prefab Template 属性的值设置为 Primary gauges 资源 ID。
在 Library > Themes 中选择 Theme Group，按下 F2，并将其重命名为 Cluster theme。
使用 Cluster theme 主题组来存储资源 ID 及其指向的集群主题的值。
在 Library > Themes 中双击 Cluster theme 主题组以在 Theme Editor 中打开主题组，在 Theme Editor 中单击 Create Theme，并将其命名为 Classic。
使用主题定义含两个圆形主要仪表的组合仪表外观。
在您在上一步中创建的 Classic 主题的列中的 Theme Editor 中，选择 Primary gauges Classic 预设。
在 Theme Editor 中创建一个名为 Modern 的主题，并将 Primary gauges 资源 ID 的值设置为 Primary gauges Modern 预设。
使用主题定义含两个现代主要仪表的组合仪表外观。
在 Dictionaries 中，单击 Locales and Themes 以启用主题组的查看，在 Cluster theme 主题组中单击 < Default >，并在 Preview 中选择您想要查看的主题。
为次要仪表设置主题¶
在本节中，您将不同的样式应用于在上一节中创建的主题。您使用这些样式来更改次要仪表图标的位置。
在上一节中，两个主题之间的主要仪表的集群外观和布局变化很大。这就是为什么对于每个主题，您使用了具有不同布局的单独预设。然而，当主题之间的变化较小时，您可以使用相同的预设，并通过应用样式来更改外观和功能。
要为次要仪表设置主题：
使用样式来设置 Left gauge icon 的位置，而不是使用属性：
在 Prefabs 中，选择 Secondary gauges > Secondary gauges grid > Left gauge icon，在 Properties 中添加 Style 属性，并将其设置为 Secondary gauges Left gauge icon Classic 样式。
Secondary gauges Left gauge icon Classic 样式仅针对 Image 节点，并设置 Secondary gauges grid Grid Layout 节点中 Left gauge icon 的位置和对齐方式。
在 Properties 中，从 Left gauge icon 节点中移除 Column、Row 和 Horizontal Alignment 属性。
您删除这些属性，因为您使用 Secondary gauges Left gauge icon Classic 样式来设置这些属性的值。
对 Secondary gauges > Secondary gauges grid > Right gauge icon 重复前两个步骤，但使用 Secondary gauges Right gauge icon Classic 样式。
将您在前几步中使用的两种样式添加到 Cluster theme 主题组中，并设置您希望为哪个主题使用哪种样式：
在 Prefabs 中右键单击 Secondary gauges 预设，并选择 Add Resources to a Theme Group。
在 Add Resources to a Theme Group 窗口中，仅选择并重命名这些资源 ID：
Left gauge icon.Node.Style 到 Left gauge icon
Right gauge icon.Node.Style 到 Right gauge icon
单击 Add。
在 Theme Editor 中打开 Cluster theme 主题组，并设置资源 ID：
对于 Classic 主题集：
Left gauge icon 到 Secondary gauges Left gauge icon Classic 样式。
Right gauge icon 到 Secondary gauges Right gauge icon Classic 样式。
对于 Modern 主题集：
Left gauge icon 到 Secondary gauges Left gauge icon Modern 样式。
Right gauge icon 到 Secondary gauges Right gauge icon Modern 样式。
现在，当您在 Dictionaries 中选择 Cluster theme 主题组中的一个主题时，Preview 将显示您为所选主题定义的资源。