Tutorial: Combine Kanzi Studio projects into a single Kanzi application
In this tutorial you learn how to combine multiple Kanzi Studio projects to create a single Kanzi application.
This image shows the result of the tutorial.
This tutorial assumes you understand the basics of working with Kanzi Studio. The best entry points for getting familiar with Kanzi Studio are:
Assets for the tutorial
The starting point of this tutorial are the Kanzi Studio projects stored in the <KanziWorkspace>/Tutorials/Multi-project/Assets directory.
The <KanziWorkspace>/Tutorials/Multi-project/Completed directory contains the completed projects of this tutorial.
The assets for this tutorial include these ready Kanzi Studio projects which you combine into a single Kanzi application:
- The Stats project contains a car statistics application.
![](../../Resources/Images/Tutorials/Multi-project/Stats.png)
- The Weather project contains a weather information application.
![](../../Resources/Images/Tutorials/Multi-project/Weather.png)
- The Music project contains a music player application.
![](../../Resources/Images/Tutorials/Multi-project/Music.png)
- The Resources project contains only the resources that the projects in this tutorial share.
![](../../Resources/Images/Tutorials/Multi-project/Resources Library.png)
Create a project and use content from another project
In this section you create a Kanzi Studio project in which you combine Kanzi Studio projects and use a prefab from another project.
To create a project and use content from another project:
- Create a project and name it Center stack.
You use this project to combine other Kanzi Studio projects in this tutorial into a single Kanzi application.
![](../../Resources/Images/Tutorials/Multi-project/Multi-project New Project.png)
- In the Project select the Screen node and in the Properties set the Screen Resolution property to 1280x480 - UWVGA.
This way you set the size of the application screen.
![](../../Resources/Images/Tutorials/Multi-project/Screen Resolution.png)
- Set the application background:
- In the Assets click Import Assets, go to the <KanziWorkspace>/Tutorials/Multi-project/Assets/Images directory, select the Background.png image, and click Open.
![](../../Resources/Images/Tutorials/Multi-project/Cluster stack Assets.png)
- In the Project select the RootPage node, in the Properties set the Background Brush property to + Texture Brush, click
next to the property name, and set the Texture Brush property of the brush to the Background texture.
![](../../Resources/Images/Tutorials/Multi-project/Background Texture Brush.png)
- In the Project right-click the Viewport 2D node and select Delete.
You can delete the Viewport 2D node because you do not create any 3D content in this tutorial.
![](../../Resources/Images/Tutorials/Multi-project/Delete Viewport 2D.png)
- In the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Stats/Stats.kzproj project.
The Stats project contains a car statistics application. You place it in the main part of the final Kanzi application.
![](../../Resources/Images/Tutorials/Multi-project/Project Reference Create Existing Project.png)
- In the Library > Project References select the project reference you created in the previous step.
TIPYou can open a referenced project in a new instance of Kanzi Studio by double-clicking the project name in the Project References library.
![](../../Resources/Images/Tutorials/Multi-project/Project References Stats.png)
- In the Properties in the .kzb URLs property in the section of the Stats project expand the Node 2D Prefab Templates category, double-click the kzb file URL of the Stats prefab, right-click, and select Copy.
You use the kzb URLs to access the content from another project.
![](../../Resources/Images/Tutorials/Multi-project/Stats Copy kzb URL.png)
- In the Project press Alt and right-click the RootPage node, select Prefab Placeholder 2D, and name it Stats.
You use this Prefab Placeholder node to instantiate the Stats prefab from the Stats Kanzi Studio project.
![](../../Resources/Images/Tutorials/Multi-project/Stats Prefab Placeholder.png)
- In the Properties set the Prefab Template property to < Resource ID > and in the text box paste the kzb file URL of the Stats prefab you copied from the Stats project reference.
![](../../Resources/Images/Tutorials/Multi-project/Stats Properties.png)
- In the Properties add and set:
- Layout Width to 880
- Layout Height to 480
You use these properties to set the size of the prefab from the Stats project in the Center stack project.
![](../../Resources/Images/Tutorials/Multi-project/Stats Properties Width Height.png)
Add prefabs from other projects
In this section you add to the Center stack project prefabs from the Weather and Music projects.
To add prefabs from other projects:
- In the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Weather/Weather.kzproj project.
The Weather project contains a weather information application. You place it in the top-right corner of the Center stack project.
![](../../Resources/Images/Tutorials/Multi-project/Project References Weather.png)
- In the Library > Project References select the project reference you created in the previous step and in the Properties in the Weather project Node 2D Prefab Templates category copy the kzb file URL of the Weather prefab.
![](../../Resources/Images/Tutorials/Multi-project/Weather Copy kzb URL.png)
- In the Project select the RootPage node, create a Prefab Placeholder 2D node, name it Weather, and in the Properties add and set:
- Prefab Template to < Resource ID > and in the text box paste the kzb file URL you copied in the previous step
- Layout Width to 400
- Layout Height to 240
- Horizontal Alignment to Right
![](../../Resources/Images/Tutorials/Multi-project/Weather Properties.png)
- Repeat the steps in this section to add the Music prefab from the <KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.kzproj Kanzi Studio project:
- In the Project name the Prefab Placeholder 2D node Music.
- In the Properties add and set:
- Layout Width to 400
- Layout Height to 240
- Horizontal Alignment to Right
- Vertical Alignment to Bottom
![](../../Resources/Images/Tutorials/Multi-project/Music Properties.png)
Use resources from another project
When your Kanzi application consists of several Kanzi Studio projects, use a dedicated project which contains only the resources used across these projects. For example, in such resource project you can store fonts, brushes, styles, and images which you want to use in more than one Kanzi Studio project of your Kanzi application.
In this section you replace the common resources in the Music project with the resources from the Resources project.
To use resources from another project:
- In Kanzi Studio open the <KanziWorkspace>/Tutorials/Multi-project/Assets/Music/Music.kzproj project, in the Library press Alt and right-click Project References, select Existing Project, and select the <KanziWorkspace>/Tutorials/Multi-project/Assets/Resources/Resources.kzproj project.
The Resources project contains only the resources that the projects in this tutorial share.
![](../../Resources/Images/Tutorials/Multi-project/Music Library Existing Project.png)
- In the Library > Project References select the project reference you created in the previous step and in the Properties in the Resources project Brushes category copy the kzb file URL of the White 8% opacity Color Brush.
![](../../Resources/Images/Tutorials/Multi-project/Resources White 8 Copy kzb URL.png)
- In the Project > Prefabs select the Music prefab and in the Properties set the Background Brush property to < Resource ID > and in the text box paste the kzb file URL you copied in the previous step.
![](../../Resources/Images/Tutorials/Multi-project/Music Properties Background Brush.png)
- Use the White 50% opacity Color Brush from the Resources project for the Artist node in the Music project:
- In the Library > Project References select the Resources project and in the Properties in the Resources project Brushes category copy the kzb file URL of the White 50% opacity Color Brush.
![](../../Resources/Images/Tutorials/Multi-project/Resources White 50 Copy kzb URL.png)
- In the Project > Prefabs select the Artist node, in the Properties set the Foreground Brush property to < Resource ID >, and in the text box paste the kzb file URL you copied in the previous step.
![](../../Resources/Images/Tutorials/Multi-project/Music Properties Foreground Brush.png)
- Use the Exo 2 Medium font from the Resources project for the Song and Artist nodes in the Music project:
- In the Library > Project References select the Resources project and in the Properties copy the kzb file URL of the Exo 2 Medium font.
![](../../Resources/Images/Tutorials/Multi-project/Resources Exo 2 Medium Copy kzb URL.png)
- In the Project > Prefabs hold down the Ctrl key, select the Song and Artist nodes, in the Properties set the Font property to < Resource ID >, and in the text box paste the kzb file URL you copied from the Resources project.
![](../../Resources/Images/Tutorials/Multi-project/Music Properties Font.png)
- Hold down the Ctrl key, in the Library click the Materials and Textures and Fonts libraries to select both, right-click Fonts, and select Delete Unreferenced Items.
You can remove the White 50% opacity and White 8% opacity brushes, and the Exo 2 Medium font from the Music project because you set the Music project to use these resources from the Resources project.
![](../../Resources/Images/Tutorials/Multi-project/Music Delete Unreferenced Items.png)
Edit prefabs from another project
In this section you add to the Center stack project the possibility to control the position of the music player progress bar in the Music project.
To edit prefabs from another project:
- In the Music project, in the Project > Prefabs > Music prefab select the Progress Bar node, in the Properties next to the Progress property click
, and save and close the project.
Kanzi Studio creates from that property a custom property, adds it to the root of the prefab, and creates a ##Template
binding to the property in the prefab root. This enables you to edit the appearance of the prefab from the root of the prefab. In this tutorial this enables you to edit the appearance of the Progress Bar using the Progress property in the Music prefab.
![](../../Resources/Images/Tutorials/Multi-project/Music Progress Bar Properties.png)
- In Kanzi Studio open the Center stack project, in the Library > Project References right-click the Music project reference and select Merge Project.
![](../../Resources/Images/Tutorials/Multi-project/Merge Music project.png)
- In the Project Merge dialog select the Progress property type and click Merge.
![](../../Resources/Images/Tutorials/Multi-project/Merge Project Progress property_900x319.png)
- In the Project select the Music prefab, in the Properties right-click and select Add Property > Music Properties > Music.Music.Progress.
You can now use the Music.Music.Progress property in the Center stack project to control the position of the music player progress bar in the Music project.
![](../../Resources/Images/Tutorials/Multi-project/Music Properties Progress.png)
What's next?
In this tutorial you learned how to combine Kanzi Studio projects into a single Kanzi application. Now you can:
See also
To learn more about the options available when you combine multiple Kanzi Studio projects, see Combining Kanzi Studio projects into a Kanzi application.
To learn more about how to use prefabs, see Using prefabs.
Open topic with navigation