データ処理の概要
.png "このページは WPF および Silverlight 2 に適用されます")
データはすべてのユーザー インターフェイスの中心です。ホテルの予約から株式市場の表示まで、ユーザー インターフェイスは通常、何らかの形式のデータを表示してそれと対話するための手段を提供します。使用するユーザー インターフェイス コンポーネントの選択、および役に立つワークフローを実現するためのレイアウト方法は、処理するデータの性質によって大きく変わります。
データ ソース
ユーザーがフォームに入力した数字を計算するなど、内部データ ソースだけを処理するアプリケーションがあります。また、データベース、Web フィード、Web サービス、または情報を含むローカル ファイルなど、外部データ ソースへのアクセスが必要なアプリケーションもあります。さらに、状況によって内部データ ソースと外部データ ソースの両方へのアクセスが必要となるアプリケーションもあります。現在、Microsoft Expression Blend では、XML と CLR オブジェクトという 2 種類の外部データ ソースがサポートされています。
XML データ ソース : アプリケーションに XML 形式のデータを提供できるローカルまたはリモートの XML ファイル。プロジェクトに追加した XML ファイルを使用したり、データ ソースを Web サイトの XML ファイルの URL に設定したりできます。
.gif "メモ")
メモ :Silverlight 2 では、XML データ ソースはサポートされていません。しかし、XML データを操作する方法については、 MSDN ライブラリ の「Silverlight での XML データの操作」で説明されています。
共通言語ランタイム (CLR) オブジェクト データ ソース : ターゲット プロパティをバインドできるパブリック プロパティ、サブプロパティ、およびインデクサを含むオブジェクト。WPF アプリケーションについては、データベースのデータを ObservableCollection に変換する Microsoft .NET Framework クラス ライブラリを使用できます。詳細については、「試してみよう : CLR オブジェクト データ ソースの作成」、または MSDN ライブラリの「データ バインディングの概要」のトピックを参照してください。Silverlight 2 アプリケーションについては、MSDN ライブラリの「データ連結」を参照してください。
メモ :Microsoft Expression Blend では、コンストラクタにパラメータを含む CLR オブジェクト データ ソース クラスはサポートされていません。
Expression Blend で開かれた WPF プロジェクトの [プロジェクト] パネルのデータ ソースの一覧
.png "Cc295161.108f0ba7-cf63-46a9-9512-5662579c9a3f(ja-jp,Expression.10).png")
Expression Blend の作業中のドキュメントに関連付けられている外部データ ソースは、[プロジェクト] パネルの [データ] の下に表示されます。ボタン .png "Cc295161.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.10).png")
を使用して、データ ソースの追加と削除を行うことができます。また、データ アイテム .png "Cc295161.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.10).png")
をアートボードにドラッグして、そのアイテムにデータがバインドされたコントロールを作成できます。データ ソースが設定されていない場合、[プロジェクト] パネルの [データ] には、データ ソースの作成に使用されるボタンのみが表示されます。
.gif "Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
データ バインド
データ バインドは、データ ソースのアイテムをユーザー インターフェイス コンポーネント (コントロール) に接続するプロセスです。これは、データが変更されるとインターフェイス コンポーネントにその変更が反映される、または、逆にインターフェイス コンポーネントが変更されるとデータにその変更が反映されることを意味します。データ バインドの最も単純な例として、四角形の幅へ内部的にバインドされたスライド バー コントロールが挙げられます。スライダ バーを移動すると、四角形が長くなったり短くなったりします。
Expression Blend には、アプリケーションの要素をさまざまなデータ ソースにバインドし、データを表示および変更する要素を構成するための、単純で一貫した機能があります。バインドは、基本的に、ソースとターゲットの間に構築されます。通常、ソースはデータ ソースまたは他のコントロールで、ターゲットはコントロールです。たとえば、スライダ バーでは、ソースはスライダ バー コントロールの Value プロパティ、ターゲットは四角形の Width プロパティになります。
バインドを作成するには、[プロパティ] パネルのプロパティに対応する [詳細プロパティ オプション] .png "Cc295161.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(ja-jp,Expression.10).png")
ボタンを使用するか、[プロジェクト] パネルの [データ] からアートボード上にアイテムをドラッグします(手順については、「プロパティまたは要素へのデータのバインド」を参照してください)。どちらの方法でも [データ バインドの作成] ダイアログ ボックスが開き、コントロール (ターゲット) とデータ フィールドまたは他のコントロール (ソース) 間にバインドのリンクを作成できます。
[高度なオプション] セクションが展開された [データ バインドの作成] ダイアログ ボックス
.png "Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(ja-jp,Expression.10).png")
[データ バインドの作成] ダイアログ ボックスには、データ ソースを選択する 3 つの基本的なオプションと高度なオプションがあります。
データ フィールド : このオプションに、プロジェクトと関連フィールドで作成された XML データ ソースと CLR オブジェクト データ ソースが表示されます。新しい XML データ ソースまたは CLR オブジェクト データ ソースを追加するか、既に作成されている既存の接続を使用することができます。バインドするフィールドを選択するには、[データ ソース] の下のアイテムを選択し、[フィールド] の下のデータ アイテムを選択します。適用できる値コンバータがなければ (このトピックで後に説明する「[高度なオプション]」を参照してください)、アイテムの種類は、バインドされるプロパティの種類と一致する必要があります。データ バインドが作成された後に、ターゲットのプロパティ値がデータ アイテムに設定されます。
要素プロパティ : このオプションは、要素のプロパティを同じ Extensible Application Markup Language (XAML) ファイルの別の要素のプロパティにバインドできます。前述したスライダ バーの例で、四角形の Width プロパティを Value プロパティにバインドする場合と同様です。このバインドを作成するには、[プロパティ] パネルでターゲット プロパティ (この例では四角形の Width プロパティ) を探し、[詳細プロパティ オプション]
ボタンをクリックし、[データ バインド] をクリックします。[要素プロパティ] タブをクリックし、左ウィンドウの要素からスライダ バー (ソース要素) を検索して、右ウィンドウのプロパティ一覧から Value プロパティを検索します。メモ :Silverlight 2 では、要素間のバインドはサポートされていません。
明示的なデータ コンテキスト : このオプションを使用すると、現在の要素または親要素のいずれかに指定されているコンテキストにあるデータ ソースにバインドできます。データ コンテキストは、共有ソースを継承するすべてのデータ バインド プロパティ内にスコープを確立して、複数のコントロール間でデータを共有する場合に便利な方法です。たとえば、ListBox オブジェクトと TextBlock オブジェクトを含むグリッド オブジェクトにデータ コンテキストを割り当てることができます。また、両方のオブジェクトのプロパティを同じコンテキストの異なるデータ アイテムにバインドできます。この機能は、マスタ詳細デザインを作成する場合に便利です。このデザインでは、リストのアイテム (マスタ ウィンドウ) をクリックすると、そのアイテムに関する情報が別のオブジェクト (詳細ウィンドウ) に表示されます。[明示的なデータ コンテキスト] タブの [フィールド] ウィンドウには、継承したデータ コンテキストから使用できるデータ接続フィールドが表示されます。この中から、ターゲット プロパティに適したフィールドを選択できます。
メモ :前述した 3 つのオプションには、データ バインド用にカスタム パスまたは XML Path Language (XPath) 式を使用できます。XPath は、[フィールド] で選択するアイテムのパスによって自動的に生成されます。しかし、データ ソースから取り込むデータを制限するために、このパスに追加できます。たとえば、配列内の 1 つのアイテムなど、目的の XML データで特定のノードを識別することにより、これを行います。XPath の使い方の詳細については、MSDN ライブラリの「XPath 構文」および「方法 : XMLDataProvider と XPath クエリを使用して XML データにバインドする」を参照してください。
高度なオプション : ダイアログ ボックスの [高度なオプション] セクションは、下部にある展開ボタン
.png "Cc295161.81e110f1-4068-4299-957d-0693cea95088(ja-jp,Expression.10).png")
をクリックすると使用できるようになり、データ フローの方向 (このトピックの後半の「データ フロー」を参照)、ターゲット プロパティの既定値、値コンバータとコンバータのパラメータなどの高度なオプションを設定できます。値コンバータは、ある型の値を別の型に変換するときに使用される .NET Framework クラス メソッドで、ソース プロパティとターゲット プロパティの型が異なる場合に必要です。値コンバータを追加するには、値コンバータ ボックスの横にある [...] ボタンをクリックし、[値コンバータの追加] ダイアログ ボックスから選択します。また、コンバータのパラメータも指定できます (たとえば、Double から Decimal への変換の場合、小数点以降に表示する桁数の値を指定することもできます)。値コンバータの例については、「試してみよう : 値コンバータの作成と適用」を参照してください。
先頭に戻る
データ フロー
データ フローは、ソースとターゲット間でデータが流れる方向に定義されます。四角形の拡大縮小を行うスライダ バーの場合、スライダ バー (ソース) から四角形 (ターゲット) という一方向のバインドのみが必要です。データ フロー用に次のバインド構成がサポートされています。
既定 これは TwoWay データ フローと同じです。
OneWay ソースを変更すると自動的にターゲットも更新されますが、ターゲットを変更してもソースは更新されません。
TwoWay ソースを変更するとターゲットも自動的に更新され、その逆も同様に更新されます。
OneWayToSource これは OneWay の反対で、ターゲットを変更するとソースも自動的に更新されます。この設定は、ターゲット プロパティが [プロパティ] パネルに表示されない特殊なケースで役立ちます。このようなケースは、依存関係プロパティではない場合に発生することがあります。OneWayToSource のバインドを使用すると、代わりにターゲットにデータ バインドを設定できます。
OneTime ソースからターゲットへの初期化が一度行われますが、それ以降はソースを変更してもターゲットは更新されません。
データ フローの動作については、次の例に示す Slider コントロール (ソース) と TextBox コントロール (ターゲット) を含むユーザー インターフェイスの例を確認してください。
バインドの種類によるデータ フローの例
.png "Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(ja-jp,Expression.10).png")
前の図では、次の手順を使用してバインドをテキスト ボックス (ターゲット) に設定します。
[プロパティ] パネルで、TextBox の Text プロパティに対応する [詳細プロパティ オプション]
ボタン ([共通プロパティ] の下にあります) をクリックし、[データ バインド] をクリックします。表示される [データ バインドの作成] ダイアログ ボックスの [要素プロパティ] タブで、[スライダ] ノードの Value プロパティをクリックします。
この例について、バインドの種類によって変わるバインドの動作を次の表で説明します。
バインドの種類 |
結果 |
|---|---|
OneWay |
スライダ バー (ソース) を移動すると、テキスト ボックス (ターゲット) が更新されます。ただし、テキスト ボックスに数値を入力してもスライダ バーは移動しません。 |
TwoWay |
スライダ バー (ソース) を移動すると、テキスト ボックス (ターゲット) が更新されます。また、テキスト ボックスに数値を入力すると、テキスト ボックスの外側をマウス クリックした後で、スライダ バーの位置が変更されます。 |
OneWayToSource |
テキスト ボックス (ターゲット) に数値を入力し、テキスト ボックスの外側をクリックすると、スライダ バー (ソース) が移動します。ただし、スライダ バーを移動してもテキスト ボックスは更新されません。 |
OneTime |
アプリケーションの起動時に、スライダ バー (ソース) の初期値によってテキスト ボックス (ターゲット) が更新されます。以降、スライダ バーを変更してもテキスト ボックスは更新されません。またテキスト ボックスに数値を入力してもスライダバーは更新されません。 |
先頭に戻る
外部データ ソースへのバインド方法
ワークフロー 1 : ソースからターゲットへのバインド
外部データ ソースの作成後、データ ソースをユーザー インターフェイス コントロールにバインドできます。この場合、2 つの方法があります。
既存のコントロールへのバインド : コントロールがドキュメント内に既に存在する場合は、データ ノードを [プロジェクト] パネルの [データ] からコントロール上にドラッグし、[既存のコントロールへのバインド] に表示される一覧からコントロールの名前 ([プロパティをコントロールにバインド]) をクリックします。
新しいコントロールの作成 : または、[プロジェクト] パネルの [データ] にある任意のデータ ノードをドキュメントにドラッグし、[このデータ フィールドを表すコントロールを選択します] に表示される一覧からコントロールを選択します。このオプションによって、新しいコントロールがドキュメントに挿入されます。
既存のコントロールをバインドするか新しいコントロールを作成すると、[データ バインドの作成] ダイアログ ボックスが開き、データ ソースにバインドするフィールドを選択できます。たとえば、文字列のデータ アイテムを TextBox 上にドラッグしてバインドを作成する場合、そのノードの Text フィールド (既定で選択されます) にバインドすることもできます。また、ダイアログ ボックスの展開ボタン をクリックして、追加のバインド設定を指定することもできます。[OK] をクリックしてダイアログ ボックスを閉じると、バインドが作成されます。デザイン時にデータを使用できる場合、選択したフィールド値によってコントロールが更新されます。手順については、「プロパティまたは要素へのデータのバインド」を参照してください。
データ アイテムがアイテムのコレクション (配列) の場合、またはデータ アイテムがターゲットの種類と一致しない場合、特定のコントロールを選択してデータを表示できるように、[データ テンプレートの作成] ダイアログ ボックスが表示されます。詳細については、このトピックで後に説明する「データ テンプレート」を参照してください。
ワークフロー 2 : ターゲットからソースへのバインド
前述のワークフローは常にデータ ソースから開始され、ターゲット コントロールで終了していましたが、既にコントロールを作成済みで、データ ソースまたは別のコントロールのプロパティにバインドするプロパティがわかっている場合は、プロセスを逆方向に実行することもできます。このワークフローは、特に要素から要素へのバインドを行うときに役に立ちます。
[プロパティ] パネルの各プロパティ値エディタの横には [詳細プロパティ オプション] ボタンがあり、これを使用してデータ バインドなどの詳細プロパティ オプションを設定できます。高度なオプション メニューの [データ バインド] をクリックすると、前述のワークフロー 1 で説明したように、[データ バインドの作成] ダイアログ ボックスが表示されます。
先頭に戻る
データ テンプレート
データ ソースのアイテム一覧を表示する状況はよくあります。アイテム一覧があるデータ アイテムは、アイテム名に含まれる "(配列)" で識別できます。[プロジェクト] パネルの [データ] からドキュメントにリスト ノードをドラッグし、バインド先となる任意のコントロールの一覧から [ListBox] を選択すると、[データ テンプレートの作成] という名前の新しいダイアログ ボックスが表示されます。このダイアログ ボックスで、データ テンプレートをデザインできます。このダイアログ ボックスは、テキスト コントロールを文字列のデータ アイテムにバインドするときにも表示されます。
データ テンプレートでは、データを表現する構造と形式を定義します。たとえば、ListBox コントロールの ItemsSource フィールドをデータ ソースのコンタクト ノードの一覧にバインドする場合、データ テンプレートを使用して、この一覧から含めるフィールドと、各フィールドに割り当てるコントロールを指定できます。名前を TextBlock として表したり、ピクチャを Image として表す、IsCurrentMember などのブール値のフィールドを CheckBox として表わしたりすることができます。データ テンプレートの作成によって、接続ノードのデータを確実に目的のビジュアル形式に変換できます。テンプレートを使用すると、任意のデータをコントロールに表示する方法について詳細に制御できます。
| メモ : |
|---|
データ テンプレートをサポートするのは、Content プロパティと ItemsSource プロパティだけです。 |
[データ テンプレートの作成] ダイアログ ボックスには、次の操作を実行するオプションがあります。
コントロールの既定スタイルの使用。アイテムのリストにバインドする場合は、通常、既定のスタイリングとして一連のテキスト ボックスが使用されます。詳細については、MSDN ライブラリの「データ テンプレートの概要」を参照してください。コントロールに対する既定のテンプレートが存在しないときは、このオプションは無効です。
プロジェクトの現在または定義済みのデータ テンプレートの使用。選択したコントロールに適したデータ テンプレート リソースが存在しない場合、このオプションは選択できません。
新しいデータ テンプレートと表示フィールドの指定。このオプションを使用すると、テンプレートに含めるデータ フィールドを選択し、各データ フィールドに割り当てるコントロールの種類を選択できます。最上位アイテムに表示されているコントロールの横にあるドロップダウン矢印をクリックして、すべてのフィールドを囲むコンテナ要素の種類を選択することもできます。後述のイメージで示されている例では、[アイテム] の横にある [StackPanel] のドロップダウン矢印をクリックし、[Grid] を選択すると、StackPanel ではなく Grid がアイテムのコンテナとしてデータ テンプレートに使用されます。データ フィールドの表示順序を指定するには、矢印ボタンを使用します。ライブ データ バインドが存在しない場合は、[サンプル データの生成] チェック ボックスをオンにします。これにより、サンプル データを使用してアートボード上にコントロールを表示し、テンプレートの外観が適切かどうかを確認できます。
[プレビュー] ウィンドウで、テンプレートの外観が適切かどうかを確認します。
[データ テンプレートの作成] ダイアログ ボックス
.png "Cc295161.3db4f515-c88c-40de-9596-421995421dd2(ja-jp,Expression.10).png")
データ テンプレートはリソースとして格納されます。既存のデータ テンプレートを変更する場合は、[リソース] パネルでデータ テンプレートの隣にある [リソースの編集] ボタンをクリックします。Expression Blend がテンプレート編集モードになり、テンプレートの構造が [オブジェクトとタイムライン] に表示されます。この編集モードでは、コントロールをテンプレートに追加し、[プロパティ] パネルのデータ バインドを使用して、追加したコントロールのプロパティをデータ ソースの新しいアイテムにバインドできます。
先頭に戻る