スタイルを使用する

ノードのプロパティ値を一括で設定するには、スタイルを使用します。

スタイルでは、スタイルがノードに適用されるプロパティの値を設定します。例えば、プロジェクト内のすべての Text Block 3D ノードのテキストのフォントタイプ、サイズ、および色を定義するためにスタイルを使用します。

スタイルで定義されたプロパティを上書きするには、そのスタイルが適用されるノードにそのプロパティを追加します。

スタイルを使用して、以下を行うことができます。

選択したスコープ内のノードタイプに適用されるスタイルを適用する

ターゲットスタイルは、Kanzi Studio プロジェクトのノードツリーの特定の部分で選択されたノードタイプの外観と感触を定義します。

例えば、異なるナビゲーションレベルでテキストに異なるフォントサイズを使用するには、各ナビゲーションレベルにスタイルを作成し、各ナビゲーションレベルのリソースディクショナリにそれぞれのスタイルを追加します。

ノードタイプの子孫にスタイルを適用するには:

  1. Library Alt を押しながら右クリック Styles で、Typed Style を選択します。

    ../../_images/create-typed-style.png

  2. Properties で、スタイルを定義したいノードタイプに Target Type プロパティを設定します。

    例えば、Target Type を Text Block 2D に設定して、プロジェクト内の Text Block 2D ノードのスタイルを定義します。

    ../../_images/set-target-type.png

  3. Properties で プロパティを追加 をクリックし、スタイルで定義したいプロパティを追加して設定します。

    例えば、Text Block 2D ノードのフォントの色を定義するには、Foreground Brush プロパティを追加し、Text Block 2D ノードでテキストをレンダリングするために使用したいブラシに設定します。

    ../../_images/foreground-brush.png

  4. Node Tree Alt を押しながら右クリック で、スタイルを適用したい子孫を持つノードを選択し、Resource Dictionary を選択します。

    ../../_images/select-resource-dictionary.png

  5. ノードの子孫にスタイルを適用したい範囲内の Dictionaries で、+ Add Resource をクリックし、Add Existing を選択して、作成したスタイルを選択します。

    ../../_images/add-existing-typed-style.png

  6. スタイルで定義したプロパティがターゲットノードに存在する場合、スタイルが適用されるようにそれらをターゲットノードから削除してください。

  7. デフォルトで、Text Block 2D ノードは Text Block 2D Style を使用し、Snap to Pixel プロパティを設定します。

    Snap to Pixel プロパティは、Text Block 2D または Text Box 2D ノードの変換とスケールを完全なピクセルに丸め、Kanzi がピクセルパーフェクトなテキストをレンダリングできるようにします。

    Text Block 2D ノードに対して Snap to Pixel プロパティを有効にするには、作成した Typed Style に Snap to Pixel プロパティを追加します。

    ../../_images/typed-style-snap-to-pixel-added.png

ノードタイプの選択されたインスタンスにスタイルを適用する

名前付きスタイルは、ノードタイプの選択されたインスタンスの外観と感触のみを定義するか、ターゲットスタイルをオーバーライドします。たとえば、Text Block 3D のターゲットスタイルを作成した場合、そのスタイルを名前付きスタイルでオーバーライドできます。

ノードタイプの選択されたインスタンスにのみスタイルを適用するには:

  1. Library Alt を押しながら右クリック Styles で、Named Style を選択します。

    ../../_images/create-named-style.png

  2. Properties で、スタイルを定義したいノードタイプに Target Type プロパティを設定します。

    例えば、Target Type を Text Block 3D に設定して、プロジェクト内の Text Block 3D ノードのスタイルを定義します。

    ../../_images/set-target-type-for-named-style.png

  3. Properties で プロパティを追加 をクリックし、スタイルで定義したいプロパティを追加して設定します。

    例えば、Text Block 3D ノードのフォントの色を定義するには、Font Color プロパティを追加し、それを赤に設定します。

    ../../_images/font-color.png

  4. Node Tree で、スタイルを適用したいインスタンスのノードを選択し、Properties で プロパティを追加 をクリックし、Style プロパティを追加して、名前付きスタイルに設定します。

    ../../_images/add-the-style-property.png

  5. スタイルで定義したプロパティがターゲットノードに存在する場合、スタイルが適用されるようにそれらをターゲットノードから削除してください。

APIでスタイルを使用する

詳細については、Style クラスを参照してください。

Style プロパティタイプ

スタイルに利用可能なプロパティタイプのリストについては、Style を参照してください。

関連項目

リソースディクショナリの使用

リソース管理 (Resource management)