バインディング (Bindings)¶

バインディングを使用して、他のプロパティ、プロパティフィールド、またはデータソースからの値でプロパティまたはプロパティフィールドの値を設定します。

バインディングを行うと、ノード、レンダーパス、2Dエフェクト、状態、状態オブジェクト、スタイルが、プロパティ値の変化や何らかの外部イベント発生に応じて、プロパティ値を自動更新できます。

たとえば、以下の操作を行うことができます。

ノードの回転プロパティフィールドをプロパティにバインドして、プロパティで制御できるゲージの針を作成します。チュートリアル: ゲージを作成するを参照してください。

あるノードの位置またはサイズを別のノードの位置またはサイズにバインドする。チュートリアル: 動的レイアウトを使用したアプリケーションの作成を参照してください。

バインディングを使用すると、Kanzi プロジェクトをモジュール化できます。

プレハブ内でバインディングを使用して、プレハブの異なるインスタンスで異なる値に設定したいプロパティにのみアクセスを提供します。ノードプレハブのインスタンスをカスタマイズするを参照してください。
データソースとのバインディングを使用して、ユーザーインターフェースのプレゼンテーションをアプリケーションデータから分離し、Kanzi Studio プロジェクトと Kanzi アプリケーションを定義するアプリケーションコード間の依存関係を取り除きます。この方法で、Model-View-Controller パターンに従って Kanzi アプリケーションを構築できます。データソース (Data Sources) を参照してください。

例えば、ユーザーインターフェース内のスピードニードルの表示を、アプリケーション内でスピードを表すデータ値にバインドすることができます。データソースを使用するを参照してください。

最も単純なバインディングは、ノードのプロパティをそのノード自身のプロパティにバインドします。また、1つのノードのプロパティやプロパティフィールドを、複数の異なるノードのプロパティやプロパティフィールドにバインドすることもできます。バインディングの使用を参照してください。

バインディングのコンポーネント¶

バインディングには次のコンポーネントがあります:

ターゲットアイテムは、ノード、レンダーパス、2Dエフェクト、ステート、ステートオブジェクト、またはスタイルである可能性があります。
ターゲットプロパティおよび、オプションでプロパティフィールド。
バインディング式によって返されるソース。

../../_images/components-of-a-binding.svg

ソースには、ノード、レンダーパス、2D エフェクト、ステート、ステートオブジェクト、スタイル、またはデータオブジェクトのプロパティまたはプロパティフィールドを指定できます。

例えば、スライダーの現在の値を表示するためにテキストブロックを使用するには、Text Block ノードの Text (TextConcept.Text) プロパティを Slider ノードの Value プロパティにバインドできます。Text Block ノードがターゲットアイテムであり、Text がターゲットプロパティであり、Slider ノードの Value (RangeConcept.Value) プロパティがソースです。チュートリアル: スライダーの作成を参照してください。

バインディングモード¶

バインディングモードは、バインディングにおけるデータフローの方向を設定します。

One way バインディングは、ソースプロパティの値が変化したときにターゲットプロパティの値を変更します。

一方向バインディングでは、ターゲットプロパティをバインディング式にバインドできます。バインディング式リファレンスを参照してください。

注釈

ステートマネージャー、アクション、またはスタイルを使用してローカルプロパティ値を設定すると、そのプロパティを対象とする一方向バインディングが解除されます。値ソースバインディングを参照してください。
To Source バインディングセット:
- バインディングの Push Target として設定したプロジェクトアイテムのプロパティ値。
- ユーザー入力などの他のソースによっても影響を受けるプロパティ値。ソースへのバインディングを作成するを参照してください。
- バインディングを追加するアイテムで使用されるリソース内のプロパティ値。
  
  例えば、ノードで使用されるレンダーパスや2Dエフェクトインスタンスでプロパティ値を設定することができます。レンダーパスプレハブのインスタンスをカスタマイズするおよび 2Dエフェクトプレハブのインスタンスをカスタマイズするを参照してください。
ソースへのバインディングでは、ターゲットプロパティをバインディング式にバインドできます。バインディング式リファレンスを参照してください。
Two way バインディングは、ソースプロパティの値が変わるとターゲットプロパティの値を変更し、その逆も同様です。

双方向バインディングでは、ターゲットプロパティをソースプロパティにのみバインドできます。双方向バインディングの作成を参照してください。

バインディングタイプ¶

これらの種類のバインディングは、Kanzi で利用可能です。

Value Sources

値ソースバインディングは、プロパティ全体のローカル値を設定し、アプリケーションの実行時にそのプロパティの値を提供します。

値ソースバインディングを参照してください。
Modifiers

修飾子バインディングは、アニメーションやステートマネージャーのようにプロパティ値を修正します。

修飾子バインディングを参照してください。
To Source

ソースへのバインディングは、プロパティ値をノードや他のプロジェクトアイテム、またはそのアイテムで使用されるリソースにプッシュします。

To-source バインディングを参照してください。

../../_images/properties-binding-types.png

値ソースバインディング¶

値ソースバインディングは、プロパティ全体のローカル値を設定し、アプリケーションの実行時にそのプロパティの値を提供します。

例えば、2Dノードの Layout Height プロパティをそのノードの Layout Width プロパティにバインドするか、Text Block 2D ノードの Text プロパティを別のノードの位置にバインドします。単純なバインディングを作成すると別のノードのプロパティにバインドするを参照してください。

値ソースバインディングは、以前に設定されたローカルプロパティ値を置き換えます。

Kanzi は、次の場合に値ソースバインディングを削除します:

プロパティ値を他の方法で設定すると、以前に設定されたローカル値が置き換えられます。
ローカルプロパティ値が削除されました。

例：

Tex Box ノードの Text プロパティを設定する一方向の値ソースバインディングは、ユーザーがテキストを編集すると動作しなくなります。バインディングでテキストを更新するには、to-source または双方向バインディングを使用してください。Text Box ノードのテキストを更新するためにバインディングを使用するを参照してください。
Toggle Button ノードの Toggle State プロパティを設定する一方向バインディングは、ユーザーがボタンを切り替えると動作を停止します。バインディングでプロパティ値を更新するには、to-sourceまたは双方向バインディングを使用してください。バインディングを使用してトグル状態を更新するを参照してください。

修飾子バインディング¶

修飾子バインディングは、アニメーションやステートマネージャーのようにプロパティ値を修正します。

修飾子バインディングは、次のいずれかです。

プロパティフィールドの値を設定します。

例えば、ノードの Layout Transformation プロパティ Rotation プロパティフィールドを Scroll View ノードの Scroll Position プロパティにバインドして、スワイプジェスチャーを使用してノードを回転させます。チュートリアル: 3Dモデルを回転させるを参照してください。
バインディング式で値のソースにアクセスします。

例えば、ノードの Render Transformation プロパティ Translation Y プロパティフィールドを、同じノードの Render Transformation プロパティ Translation X プロパティフィールドにバインドして、そのノードがx軸と同じ距離だけy軸上で移動するようにします。バインドしているプロパティの値を変更すると getCurrentValue を参照してください。

Kanzi は、値のソースバインディングの後に修飾子バインディングを実行します。修飾子バインディングはローカルプロパティ値を置き換えません。

To-source バインディング¶

ソースへのバインディングは、プロパティ値をノードや他のプロジェクトアイテム、またはそのアイテムで使用されるリソースにプッシュします。

たとえば、to-source バインディングを使用して次のことができます:

他の入力ソース、例えばユーザー入力によっても影響を受けるプロパティ値を設定します。

例：
- List Box ノードでは、Selected Item Index プロパティ。
- Scroll View または Grid List Box ノードでは、Scroll Position プロパティ。
- Slider ノードでは、Value プロパティ。プロパティでスライダーの値を更新する。
- Text Box ノードでは、Text プロパティ。Text Box ノードのテキストを更新するためにバインディングを使用する。
- Toggle Button ノードでは、Toggle State プロパティ。バインディングを使用してトグル状態を更新するを参照してください。
- Toggle Button Group ノードでは、Current Button Index プロパティ。
Viewport 2D ノードで使用されるレンダーパスプレハブインスタンスのプロパティ値を設定します。レンダーパスプレハブのインスタンスをカスタマイズするを参照してください。
2Dノードで使用されるエフェクトインスタンスのプロパティ値を設定します。2Dエフェクトプレハブのインスタンスをカスタマイズするを参照してください。

マテリアルタイプバインディング¶

マテリアルタイプには、以下のための独自のバインディングタイプがあります：

Uniforms

ユニフォームバインディングを使用すると、シェーダーコードを変更せずに、マテリアルタイプで使用されるシェーダーユニフォームの値を変更できます。

ユニフォームバインディングを参照してください。
Temporary Variables

マテリアルタイプでは、一時変数バインディングを使用して、バインディングの結果を一時変数に格納することができます。この変数は、同じマテリアルタイプ内の他のバインディングで参照することができます。

一時変数バインディングを参照してください。