ユーザー入力またはその他の内部値へのオブジェクトのバインド

  • [アーティクル]

1 つのプロパティの値を別のプロパティの値にバインドすることによって、両者を同期させ、一方のプロパティを変更するともう一方も更新されるようにします。これは、ユーザーの入力によってコントロールの表示方法が決まるようにする場合に便利です。たとえば、メディア プレーヤーでは、音量スライダーをユーザーが動かすと、対応するテキスト ボックス内の値が変わるようにします。

Ee341411.0345097b-aefd-4c9e-a7e4-115fadabe492(JA-JP,Expression.30).png

スライダーの値をテキスト ボックスにバインドするには

  1. [ツール] パネルでボタン ツール グループを右クリックし、表示された一覧から [Slider] Ee341411.b478d0b9-7525-47cb-b633-0007e08432d4(JA-JP,Expression.30).png コントロールを選択します。

  2. メイン ドキュメントのアートボードに [Slider] コントロールを描きます。

  3. 新しい [Slider] オブジェクトを選択し、[プロパティ] パネルの [共通プロパティ] にあるプロパティを次のように設定します。

    • [LargeChange] を 10 に設定します。これは、スライダ バーを 1 回クリックするたびに、値が 10 だけ変わるという意味です。

    • [Maximum] を 2001 に設定します。これで、スライダ バーの値の範囲が 0 ～ 2001 になります。

    • [SmallChange] を 1 に設定します。これは、矢印キーを 1 回押すたびにスライダーの値が 1 だけ変わるという意味です。

  4. [ツール] パネルでボタン ツールのグループを右クリックし、表示された一覧から [TextBox] コントロール Ee341411.b5206bf1-18c8-491f-8239-3e542b2ca147(JA-JP,Expression.30).png を選択します。

  5. アートボードの [Slider] オブジェクトの横に、[TextBox] コントロールを描きます。

  6. 新しい [TextBox] オブジェクトを選択し、[プロパティ] パネルの [共通プロパティ] にある [Text] プロパティを見つけます。この [Text] プロパティを [Slider] コントロールの値にバインドします。

  7. [詳細プロパティ オプション]Ee341411.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、表示された一覧の [データ バインド] をクリックします。

  8. [データ バインドの作成] ダイアログ ボックスの [要素プロパティ] タブをクリックします。ここが、内部の値をプロパティにバインドする場所になります。

  9. [シーン要素] の下の要素ツリーを展開して、[Slider] オブジェクトを選択します。

  10. [プロパティ] の下にある [Value : (Double) ] を選択します。

    テキスト ボックスのコンテンツがスライダーの値にバインドされます。

    Ee341411.alert_tip(JA-JP,Expression.30).gifヒント :

    [Value] プロパティが表示されない場合は、[表示] ドロップダウン リストで [すべてのプロパティ] を選択します。[表示] ドロップダウン リストでは、既定で [一致する型のみ] が選択されています。[一致する型のみ] が選択されている状態で一覧に目的のプロパティが表示されない場合は、値コンバーターを使用して値を変換しなければならないことがあります。

    詳細については、「試してみよう: データのタイプ変更」を参照してください。

  11. [詳細プロパティの表示] Ee341411.de239c9d-42ce-4f5e-83b9-5f9924c0431f(JA-JP,Expression.30).png をクリックし、[バインドの方向] の横にある [TwoWay] を選択します。

    この設定によって、テキスト ボックスが変更されるとスライダーも更新され、スライダーが変更されるとテキスト ボックスも更新されるようになります。

  12. F5 キーを押してアプリケーションを実行します。

  13. [Thumb] をドラッグし、テキスト ボックスの値が更新されるかどうか確認します。

    Ee341411.0279e814-a5af-4322-84d4-754083a57f83(JA-JP,Expression.30).png

    Ee341411.alert_tip(JA-JP,Expression.30).gifヒント :

    上の図のように、テキスト ボックスに小数桁の多い数値が表示されます。テキスト ボックスに値が渡される前に、値コンバーターを作成して、データ型を整数に変換しておくと、このような数値は表示されません。

関連項目

タスク

試してみよう: データのタイプ変更

その他のリソース

コントロールでのデータ表示