ステップ1 - クラスター用のテーマを作成する¶
このチュートリアルのこのステップでは、クラスターのテーマを作成する方法を学びます。丸いプライマリゲージ（速度とRPM）とバーのセカンダリゲージ（エンジン温度と燃料）を含むクラスターを持つプロジェクトから始め、そのクラスターのためのモダンなテーマを作成します。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Theming チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Theming/Start/Tool_projectディレクトリにあるチュートリアルの開始地点プロジェクト。Tool_projectディレクトリには、テーマを作成するユーザーインターフェースを持つ Kanzi Studio プロジェクトが含まれています。Applicationディレクトリには、アプリケーション内の非ベイクテーマをユーザーが変更できるようにするために、このチュートリアルのステップ3で使用する空のアプリケーションが含まれています。
<KanziWorkspace>/Tutorials/Theming/Completedディレクトリにある完成したチュートリアル。
開始プロジェクトの内容¶
スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。
Library > Styles には、このチュートリアルでテーマを作成するために使用するスタイルが含まれています。チュートリアルで使用する際に、それぞれのスタイルについて学びます。
さまざまなタイプのスタイルとその作成方法について詳しくは、スタイルを使用する を参照してください。
RootPage ノードには、ゲージの制御プロパティが含まれています。プロジェクト内のゲージは、RootPage ノード内のこれらのプロパティにバインドされます。これにより、プロジェクト内の単一のノードからゲージを制御することができます。
レイアウト。Prefabs では、このチュートリアルでテーマを作成するために必要なレイアウトを見つけることができます。
Primary gauges Classic プレハブは、Classic テーマのクラスター速度計とRPM計のレイアウトを設定します。
このプレハブには以下が含まれています:
Background ノードには、クラスターバックグラウンドが含まれています。
Gauges ノードには、速度計とRPM計が含まれています。
Car ノードは、そのテーマの車のモデルを含むプレハブを指しています。
Primary gauges grid Classic ノードは、主要なゲージで表示されるコンテンツを含み、配置します。これには、速度とRPMの値、および主要なゲージで表示される追加情報が含まれます。
Primary gauges Modern プレハブは、Modern テーマのクラスター速度計とRPM計のレイアウトを設定します。
このプレハブには以下が含まれています:
Gauges ノードには、速度計とRPM計、およびクラスタの背景が含まれています。
このテーマ（Primary gauges grid Modern）でプライマリゲージと共に表示されるコンテンツを配置する Grid Layout ノードと、ゲージの上に速度とRPMの値を配置する2つの Trajectory Layout ノード。
Secondary gauges プレハブは、Classic および Modern テーマのクラスターセカンダリゲージのレイアウトを設定します。セカンダリゲージはクラスターの下部に配置されます。Hybrid 車バリアントテーマでは、セカンダリゲージはバッテリーと燃料ゲージを表示し、Gasoline 車バリアントテーマでは、エンジン温度と燃料ゲージを表示します。
このプレハブには以下が含まれています:
Gauges ノードには、両方のセカンダリゲージが含まれています。
Secondary gauges grid Grid Layout ノードは、クラスター内のセカンダリゲージのレイアウトを設定します。
ユーザーインターフェース要素。Prefabs には、このチュートリアルでテーマを作成するために必要なユーザーインターフェース要素が見つかります。
Car Gasoline プレハブには、Classic テーマの Gasoline 車バリアントの速度計とRPM計の間に表示される車のモデルが含まれています。
Car Hybrid プレハブは、Classic テーマの Hybrid 車種の速度計と回転計の間に表示される車のモデルを含んでいます。
Table Overview プレハブは、スピードメーターとRPMゲージの間に表示される Classic テーマのコンテンツを含んでいます。
Table RPM プレハブには、RPMゲージに表示されるパネルのコンテンツが含まれています。
Table Speed プレハブには、スピードゲージに表示されるパネルのコンテンツが含まれています。
Theme selector プレハブには、このアプリケーションで非ベイクテーマを変更するために使用できるコントロールが含まれています。このチュートリアルの最後のステップでは、テーマをエクスポートするためのさまざまなオプションと、Kanzi Engine API を使用してアプリケーションテーマを変更する方法について学びます。
クラスターのテーマを作成する¶
このセクションでは、クラスターのための Classic と Modern テーマを作成し、主要なゲージをテーマ化します。各テーマに対して別々のプレハブを使用します。なぜなら、2つのテーマ間でクラスターの外観と主要なゲージのレイアウトの変更が大きいためです。このチュートリアルの開始時点のプロジェクトには、すでに両方のテーマのプレハブが含まれていますが、Theme Group と Theming リソースについて学びます。また、Preview が表示するテーマを設定する方法も学びます。
クラスターのテーマを作成するには:
Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Theming チュートリアルの横にある Open をクリックし、Start project を選択します。
Node Tree で、RootPage > Primary gauges Classic Prefab Placeholder ノードを選択して削除します。
この Prefab Placeholder ノードを Prefab View ノードに置き換えます。プレハブを動的に変更できるようにするためには、Prefab View ノードを使用する必要があります。ノードプレハブの使用 を参照してください。
Node Tree Alt を押しながら右クリック で RootPage を選択し、Prefab View 2D ノードを選択して、名前を Primary gauges にし、RootPage ノードの最初の子になるように移動します。
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 と名前を付けます。
このテーマを使用して、2つの丸いプライマリゲージを持つクラスターの外観を定義します。
前のステップで作成した Classic テーマの列の Theme Editor で、Primary gauges Classic プレハブを選択します。
Theme Editor で Modern というテーマを作成し、Primary gauges リソースIDに Primary gauges Modern プレハブの値を設定します。
このテーマを使用して、2つのモダンなプライマリゲージを持つクラスターの外観を定義します。
Dictionaries で Locales and Themes をクリックしてテーマグループの表示を有効にし、Cluster theme テーマグループで < Default > をクリックし、Preview で表示したいテーマを選択します。
セカンダリーゲージをテーマ化する¶
このセクションでは、前のセクションで作成したテーマに異なるスタイルを適用します。これらのスタイルを使用して、セカンダリゲージアイコンの位置を変更します。
前のセクションでは、2つのテーマ間での主要ゲージのクラスタの外観とレイアウトの変化が大きかったです。このため、各テーマに対して異なるレイアウトのプレハブを使用しました。しかし、テーマ間の変化が小さい場合は、同じプレハブを使用し、スタイルを適用することで外観と機能を変更することができます。
セカンダリゲージをテーマ化するには:
プロパティを使用する代わりに、スタイルを使用して 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 スタイルを使用するため、これらのプロパティを削除します。
前の2つのステップを Secondary gauges > Secondary gauges grid > Right gauge icon に対して繰り返しますが、Secondary gauges Right gauge icon Classic スタイルを使用してください。
前のステップで使用した2つのスタイルを 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 に選択したテーマのために定義したリソースが表示されます。