第 3 步 - 创建用户界面结构¶
在此步骤中，您将学习如何使用 Pages 窗口为您的 Kanzi 应用程序创建用户界面的结构，然后使用 Asset Packages 和 Assets 窗口向您的应用程序添加内容。
在 Pages 窗口中创建用户界面结构。¶
使用 Page 和 Page Host 节点在您的应用程序中创建用户界面的不同部分。这些节点可以包含应用程序的部分，甚至是应用程序中的整个应用程序。
在 Kanzi Studio 中处理 Page 和 Page Host 节点的最有效方法是使用 Pages 窗口。使用 Pages 窗口来：
使用 Page 和 Page Host 节点创建应用程序结构。
通过点击 Page 或 Page Host 节点在应用程序的不同部分之间导航。
可视化应用程序的 Page 和 Page Host 结构。
您可以在 Prefabs 和 Properties 窗口下方找到 Pages 窗口。
要在 Pages 窗口中创建用户界面结构：
在 Pages 窗口中，将鼠标指针移动到 RootPage 上，并单击
三次，以在 RootPage 节点下创建三个 Page 节点。当您在 Pages 窗口中点击一个 Page 节点时，Kanzi Studio 使用 Push 过渡切换到该 Page 节点。由于您刚创建的 Page 节点中没有内容，因此在 Preview 中点击不会产生任何视觉效果。
当您在 Pages 窗口中创建节点时，您也可以在 Node Tree 窗口中看到相同的节点。
动作
快捷键
平移
点击鼠标中键并拖动。
按下 Space 键，然后单击并拖动鼠标左键。
缩放
滚动鼠标滚轮。
按下 Shift 和 Alt 键，然后单击并拖动鼠标左键。
在 Pages 窗口中，双击您在上一步中创建的 Page 节点的每个名称并重命名它们。例如，将节点命名为 Home、Car 和 Media。
小技巧
当您在 Pages 窗口中双击 Page 或 Page Host 节点时，Kanzi Studio 会在一个单独的 Preview 窗口选项卡中打开该节点及其树。当您的应用程序结构的复杂性增加时，这使您可以仅查看和处理应用程序的特定部分。
使用 Asset Packages 窗口中的工厂内容。¶
Kanzi Studio 附带可添加到应用程序中的 2D 和 3D 资源。此工厂内容非常适合用于创建原型，而无需花费时间创建资源来展示您的想法。
要在 Asset Packages 窗口中使用工厂内容：
在 Asset Packages 窗口中选择 Factory Content 资产源。您可以在 Preview 窗口下方找到 Asset Packages 窗口。
从 Asset Packages 窗口中拖动 Car 到 Pages 窗口，并将其放在 Car Page 节点上。当您在 Pages 窗口中的节点上放置内容时，Kanzi Studio 会将您放置的内容添加到该节点。
重复上一步，但将 Cover Flow 拖动并放置到 Media 节点上。
在 Node Tree 窗口中，选择 Image 和 Text Block 2D 节点，并将它们拖到 Home Page 节点。
在 Node Tree 窗口中选择 Image 节点，并按下 Ctrl H 键以显示 Image 节点。
在 Node Tree 窗口中选择 RootPage 节点，并在 Properties 窗口中将 Default Subpage 属性设置为 Home 节点。
通过设置 Default Subpage 属性，您可以告诉 Kanzi 在此 Page Host 激活时激活哪个 Page 或 Page Host 节点。
在 Pages 窗口中，当您单击 Page 或 Page Host 节点时，Kanzi Studio 会过渡到该节点。这使您能够在不创建交互元素（例如按钮）的情况下，尝试您的 Kanzi 应用程序用户界面的结构和流程。在本教程的下一步中，您将按钮添加到用户界面。
在 Assets 窗口中导入内容。¶
在本节中，您将学习如何将使用其他工具创建的内容导入到您的 Kanzi Studio 项目中，并在您的 Kanzi 应用程序中使用这些内容。
当您将内容导入到项目中时，Kanzi Studio 会将导入的内容复制到项目目录中，并在需要时，在 Library 窗口中从该内容创建可在项目中使用的 Kanzi 资源。例如，当您导入 png 图像时，Kanzi Studio 会创建一个 Single Texture 资源，以便您可以在项目中使用该图像。
您可以在 Assets 窗口中导入和查看项目中的内容，该窗口位于 Preview 窗口下方，或者在主菜单中选择 File > Import 并选择要导入的内容类型。
要在 Assets 窗口中导入内容：
在 Assets 窗口中，点击 Import Assets，选择您要导入的内容，然后点击 Open。例如，前往
<KanziWorkspace>/Tutorials/Getting started/Assets并导入所有内容。Kanzi Studio 将导入的内容复制到项目目录中，您可以在 Library 窗口下的 Resource Files 中访问该目录，并在 Library 窗口中从该内容创建 Kanzi 资源，以便您可以在项目中使用导入的内容。
在 Pages 窗口中，单击 Home Page 节点以转到该 Page 节点。
在 Node Tree 窗口中选择 Image 节点，并在 Properties 窗口中将 Image 属性设置为 Road 纹理。
在 Properties 窗口中添加并设置这些属性：
Horizontal Alignment 到 Stretch
Vertical Alignment 到 Stretch
Content Stretch 到 Uniform to fill
使用 Content Stretch 属性来设置节点如何在不改变节点大小的情况下拉伸此节点中的内容。
在 Pages 编辑器中，当您单击 Page 节点时，Preview 窗口会显示您单击的 Page 节点的内容。
另请参阅¶
要了解有关 Kanzi Studio 工厂内容的更多信息，请参阅 出厂内容资产。
要了解有关将资产导入到 Kanzi Studio 的更多信息，请参阅 导入。