データの表示

  • [アーティクル]

データはすべてのユーザー インターフェイスの中心です。一般に、ユーザー インターフェイスは、ホテルの予約や株取引など、何らかの形式のデータを目で見て対話するための手段を提供します。使用するユーザー インターフェイス コンポーネントの選択、および役に立つワークフローを実現するためのレイアウト方法は、処理するデータの性質によって大きく変わります。

データ ソース

ユーザーがフォームに入力した数字を計算するなど、内部データ ソースだけを処理するアプリケーションがあります。また、データベース、Web フィードやWeb サービス、さまざまな情報の入ったローカル ファイルなど、外部のデータ ソースへのアクセスが必要なアプリケーションもあります。Microsoft Expression Blend では、次のデータ ソースを使用できます。

  • XML データ ソース : アプリケーションに XML 形式のデータを提供できるローカルまたはリモートの XML ファイル。プロジェクトに追加した XML ファイルを使用したり、データ ソースを Web サイトの XML ファイルの URL に設定したりできます。

    詳細については、「ライブ XML データ ソースの使用」を参照してください。

    Cc295161.alert_note(JA-JP,Expression.30).gifメモ :

    Microsoft Silverlight で、XML のライブ データ ソースを使用することはできません。ただし、XML データの使用方法については、MSDN の 「XML データ」で説明されています。

  • オブジェクト データ ソース   目的のプロパティをバインドできるパブリック プロパティを含むオブジェクト。WPF アプリケーションについては、データベースのデータを ObservableCollection に変換する Microsoft .NET Framework クラス ライブラリを使用できます。

    詳細については、「オブジェクト データ ソースを使用してデータベースへ接続」、「試してみよう : サンプル SQL データベースからのデータ表示」、または MSDN の「データ バインディングの概要」を参照してください。Silverlight アプリケーションのデータ バインドについては、MSDN の「データ バインディング」を参照してください。

    Cc295161.alert_note(JA-JP,Expression.30).gifメモ :

    Microsoft Expression Blend では、コンストラクターにパラメーターを含む CLR オブジェクト データ ソース クラスはサポートされていません。

  • サンプル データ ソース   [データ]パネルの [サンプル データ ソースの追加] ツールを使用して作成したローカル ファイル。アートボードには外部データが表示されないので、アプリケーションをデザインしているときにサンプル データを使えるようになっています。

    詳細については、「サンプル データの作成」を参照してください。

[データ] パネルに表示されたデータ ソースの一覧

Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(JA-JP,Expression.30).png

Expression Blend の作業中のドキュメントに関連付けられている外部データ ソースは、[データ] パネルの [このドキュメント] の下に表示されます。プロジェクトのすべてのドキュメントで使用できるデータ ソースは、[データ]パネルの [アプリケーション] の下に表示されます。データ ソースを作成するには、[データ] パネルの上端にあるボタンを使用します。データ アイテムをアートボードにドラッグすると、そのデータにバインドされたコントロールを作成できます。

詳細については、「コントロールでのデータ表示」を参照してください。

データ バインド

データ バインドは、データ ソースのアイテムをユーザー インターフェイス コンポーネント (コントロール) に接続するプロセスです。つまり、データが変更されるとインターフェイスのコンポーネントにその変更が反映され、逆にインターフェイスのコンポーネントが変更されるとデータにその変更が反映されるようになります。データ バインドの最も単純な例として、四角形の幅へ内部的にバインドされたスライド バー コントロールが挙げられます。スライダー バーを移動すると、四角形が長くなったり短くなったりします。

Expression Blend には、アプリケーションの要素をさまざまなデータ ソースにバインドし、データを表示および変更する要素を構成するための一貫した便利な方法があります。バインドは、基本的に、ソースとターゲットの間に構築されます。通常、ソースはデータ ソースまたは他のコントロールで、ターゲットはコントロールです。たとえば、スライダー バーでは、ソースはスライダー バー コントロールの Value プロパティ、ターゲットは四角形の Width プロパティになります。

バインドを作成するには、[プロパティ] パネルで、目的のプロパティの [詳細プロパティ オプション] ボタン Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png を使用するか、[データ] パネルからアートボードにアイテムをドラッグしますどちらの方法でも [データ バインドの作成] ダイアログ ボックスが開き、コントロール (ターゲット) とデータ フィールドまたは他のコントロール (ソース) 間にバインドのリンクを作成できます。

詳細については、「データへのオブジェクトのバインド」を参照してください。

詳細オプションが展開された [データ バインドの作成] ダイアログ ボックス

Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(JA-JP,Expression.30).png

[データ バインドの作成] ダイアログ ボックスには、データ ソースを選択する 3 つの基本的なオプションと詳細オプションがあります。

  • データ フィールド   プロジェクトで作成した XML データソースと CLR オブジェクト データソース、および関連するフィールドが表示されます。新しい XML データ ソースや CLR オブジェクト データ ソースを追加したり、既に作成されている接続を使用したりできます。バインドするフィールドを選択するには、[データ ソース] の下のアイテムを選択し、[フィールド] の下のデータ アイテムを選択します。値を変換するコンバーター (このトピック後半の「詳細オプション」を参照してください) がない場合は、アイテムのデータ型と、バインドされるプロパティの型が同じでなければなりません。データ バインドを作成すると、ターゲットのプロパティが、データ アイテムにある値に設定されます。

  • 要素プロパティ   要素のプロパティの 1 つを、同じ Extensible Application Markup Language (XAML) ファイルにある要素の別のプロパティにバインドします。上の例の四角形の Width プロパティをスライダー バーのプロパティにバインドする場合とよく似ています。このバインドを作成するには、[プロパティ] パネルでターゲット プロパティ (この例では四角形の Width プロパティ) を見つけて、[詳細プロパティ オプション] Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[データ バインド] をクリックします。[要素プロパティ] タブをクリックし、左ウィンドウの要素からスライダー バー (ソース要素) を検索して、右ウィンドウのプロパティ一覧から Value プロパティを検索します。

  • 明示的なデータ コンテキスト   現在の要素またはその親要素に指定されているコンテキストのデータ ソースにバインドします。データ コンテキストは、共有ソースを継承するすべてのデータ バインド プロパティ内にスコープを確立して、複数のコントロール間でデータを共有する場合に便利な方法です。たとえば、ListBox オブジェクトと TextBlock オブジェクトを含む Grid オブジェクトにデータ コンテキストを割り当て、両方のオブジェクトのプロパティを同じコンテキストの異なるデータ アイテムにバインドできます。これは、マスターと詳細が結びついたデザイン、つまり一覧 (マスター ウィンドウ) のアイテムをクリックすると、そのアイテムの情報が別のオブジェクト (詳細ウィンドウ) に表示されるデザインを作成するのに便利です。[明示的なデータ コンテキスト] タブの [フィールド] ウィンドウには、継承したデータ コンテキストから使用できるデータ接続フィールドが表示されます。この中から、ターゲット プロパティに適したフィールドを選択できます。

    Cc295161.alert_note(JA-JP,Expression.30).gifメモ :

    上の 3 つのオプションのすべてで、データ バインド用に XML Path 言語 (XPath) またはカスタム パスを指定できます。[フィールド] にあるアイテムを選択すると、[カスタム XPath 式を使用する] の横にあるフィールドに、XPath が自動的に入力されます。しかし、データ ソースから取り込むデータを制限するために、このパスに追加できます。たとえば、配列内の 1 つのアイテムなど、目的の XML データで特定のノードを識別することにより、これを行います。XPath の使い方の詳細については、MSDN の「XPath 構文」および「方法 : XMLDataProvider と XPath クエリを使用して XML データにバインドする」を参照してください。

  • 詳細オプション   展開ボタン Cc295161.de239c9d-42ce-4f5e-83b9-5f9924c0431f(JA-JP,Expression.30).png をクリックするとダイアログボックスが広がり、データ フローの方向 (下の「データ フロー」を参照)、ターゲット プロパティのデフォルト値、値コンバーターとそのパラメーターの設定などのオプションが表示されます。値コンバーターは、ある型の値を別の型に変換するのに使用する .NET Framework クラス メソッドです。ソース プロパティとターゲット プロパティの型が異なる場合に必要です。値コンバーターを追加するには、[値コンバーター] ボックスの横にある [新しい値コンバーターの追加] Cc295161.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(JA-JP,Expression.30).pngをクリックし、[値コンバーターの追加] ダイアログ ボックスでコンバーターの 1 つを選択します。また、コンバーターのパラメーターも指定できます (たとえば、Double から Decimal への変換の場合、小数点以降に表示する桁数の値を指定することもできます)。

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

データ フロー

データ フローは、ソースとターゲット間でデータが流れる方向に定義されます。たとえば、四角形のサイズを変えるスライダー バーの場合は、スライダー バー (ソース) から四角形 (ターゲット) という一方向のバインドのみが必要です。データ フロー用に次のバインド構成がサポートされています。

  • 既定   ソースを変更するとターゲットが自動的に更新され、逆にターゲットを変更するとソースが更新されます。これは [TwoWay] データ フローと同じです。

  • OneWay ソースを変更するとターゲットが自動的に更新されますが、ターゲットを変更してもソースは更新されません。

  • TwoWay ソースを変更するとターゲットが自動的に更新され、逆にターゲットを変更するとソースが更新されます。

  • OneWayToSource   ターゲットを変更するとソースが自動的に更新されますが、ソースを変更してもターゲットは更新されません。これは、[OneWay] の逆です。ターゲットのプロパティが [プロパティ] パネルに表示されない場合 (依存関係のないプロパティなど) に便利です。OneWayToSource のバインドを使用すると、代わりにターゲットにデータ バインドを設定できます。ただし、このオプションは、Silverlight プロジェクトで選択することはできません。

  • **OneTime   **何も変更されません。ターゲットは、アプリケーションを初期化したときのソースの値に設定されます。その後、ターゲットが更新されることはありません。

次に、[Slider] コントロール (ソース) と [TextBox] コントロール (ターゲット) を含むインターフェイスを例にして、データ フローの仕組みを説明します。

バインドの種類によるデータ フローの例

Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(JA-JP,Expression.30).png

次の手順に従って、テキスト ボックス (ターゲット) にバインドを設定します。

  1. [プロパティ] パネルで、[共通プロパティ] の下にある [TextBox] の [Text] プロパティの横にある [詳細プロパティ オプション] ボタン Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png をクリックし、[データ バインド] をクリックします。

  2. 表示される [データ バインドの作成] ダイアログ ボックスの [要素プロパティ] タブで、[Slider] ノードの [Value] プロパティをクリックします。

この例について、バインドの種類によって変わるバインドの動作を次の表で説明します。

バインドの種類

結果

OneWay

スライダー バー (ソース) を移動すると、テキスト ボックス (ターゲット) が更新されます。しかし、テキスト ボックスに数値を入力してもスライダー バーは動きません。

TwoWay

スライダー バー (ソース) を移動すると、テキスト ボックス (ターゲット) が更新されます。また、テキスト ボックスに数値を入力してから、その外側をクリックすると、スライダー バーの位置が変わります。

OneWayToSource

テキスト ボックス (ターゲット) に数値を入力してから、その外側をクリックすると、スライダー バー (ソース) が動きます。ただし、スライダー バーを移動してもテキスト ボックスは更新されません。

OneTime

アプリケーションの起動時に、スライダー バー (ソース) の初期値によってテキスト ボックス (ターゲット) が更新されます。その後スライダー バーを動かしてもテキスト ボックスは更新されません。テキスト ボックスに数値を入力しても、スライダバーは更新されません。

この例の設定手順の詳細については、「ユーザー入力またはその他の内部値へのオブジェクトのバインド」を参照してください。

データ ソースにバインドする方法

ワークフロー 1 : ソースからターゲットへのバインド

外部データ ソースの作成後、データ ソースをユーザー インターフェイス コントロールにバインドできます。この場合、2 つの方法があります。

  • 既存のコントロールをバインドする   ドキュメントに既にコントロールがある場合は、そのコントロールに [データ] パネルからデータ ノードをドラッグするとバインドできます。ドラッグしているときに、オブジェクトのどのプロパティにデータがバインドされるかを示すメッセージが表示されます。

    Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(JA-JP,Expression.30).png

    別のプロパティを指定する場合は、マウスのボタンを離す前に Shift キーを押します。

    Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(JA-JP,Expression.30).png

  • 新しいコントロールを作成する   [データ] パネルのデータ ノードをドキュメントにドラッグします。このオプションによって、新しいコントロールがドキュメントに挿入されます。

詳細については、次のトピックを参照してください。

ワークフロー 2 : ターゲットからソースへのバインド

上のワークフロー 1 では、まずデータ ソースを選んでから、ターゲット コントロールにバインドしました。しかし、既にコントロールを作成済みで、そのコントロールのどのプロパティをデータ ソース、またはコントロールの別のプロパティにバインドするかがわかっている場合は、逆方向にバインドできます。このワークフローは、特に要素から要素へのバインドを行うときに役に立ちます。

詳細については、「ユーザー入力またはその他の内部値へのオブジェクトのバインド」を参照してください。

[プロパティ] パネルの各プロパティの値の横には、[詳細プロパティ オプション] ボタン Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(JA-JP,Expression.30).png があります。このボタンをクリックして詳細オプション メニューを表示し、[データ バインド] をクリックすると、上の「ワークフロー 1」と同じ [データ バインドの作成] ダイアログ ボックスが開きます。

データ テンプレート

データ ソースのアイテム一覧を表示すると便利な場合がよくあります。アイテムの一覧を含むデータ アイテムの名前には、「(配列)」と表示されています。この一覧を含むノードを [データ] パネルから [DataGrid] コントロールにドラッグすると、データが表示されて、そのテンプレートを変更できるようになります。

データ テンプレートの変更については、次のトピックを参照してください。

データ テンプレートは、スタイル テンプレートや他のテンプレートと同じように、リソースとして保存されます。既存のデータ テンプレートを変更する場合は、[リソース] パネルでデータ テンプレートの横にある [リソースの編集] ボタンをクリックします。Expression Blend がテンプレート編集モードになり、テンプレートの構造が [オブジェクトとタイムライン] に表示されます。この編集モードでは、コントロールをテンプレートに追加し、[プロパティ] パネルのデータ バインドを使用して、追加したコントロールのプロパティをデータ ソースの新しいアイテムにバインドできます。

関連項目

概念

オブジェクトのスタイル指定

オブジェクトの配置