データの表示

  • [アーティクル]

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

データ ソース

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

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

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

    Noteメモ :

    Microsoft Silverlight で、XML のライブ データ ソースを使用することはできません。ただし、XML データの使用方法については、MSDN の 「XML データ Cc295161.xtlink_newWindow(ja-jp,Expression.40).png」で説明されています。

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

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

    Noteメモ :

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

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

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

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

Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(ja-jp,Expression.40).png

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

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

データ バインド

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

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

バインドを作成するには、[プロパティ] パネルで、目的のプロパティの [詳細オプション] ボタン Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png を使用するか、[データ] パネルからアートボードにアイテムをドラッグします

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

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

Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(ja-jp,Expression.40).png

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

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

  • 要素プロパティ   オブジェクトのプロパティの 1 つを、同じ Extensible Application Markup Language (XAML) ファイルにあるオブジェクトの別のプロパティにバインドします。上の例の四角形の Width プロパティをスライダー バーの Value プロパティにバインドする場合とよく似ています。このバインドを作成するには、次のいずれかの操作を行います。

    • [プロパティ] パネルでターゲット プロパティ (この場合は四角形の Width) を見つけて [詳細プロパティ] Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png、[データ バインド] の順にクリックします。[要素プロパティ] タブをクリックし、左ウィンドウのオブジェクトからスライダー バー (ソース オブジェクト) を参照して、右ウィンドウのプロパティ一覧から Value プロパティを検索して選択します。

    • [プロパティ] パネルでターゲット プロパティ (この場合は Width) を見つけて [詳細プロパティ] Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png、[要素のプロパティのバインド] の順にクリックします。カーソルがアートボード要素ピッカーアートボード要素ピッカーのアイコン に変わります。アートボードで、プロパティをバインドするオブジェクトをクリックします。[データ バインドの作成] ドロップダウン リストで [Value] プロパティを選択します。

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

    データ コンテキスト情報には、[データ] パネルの下部にある [データ コンテキスト] カテゴリからアクセスすることもできます。アートボードで選択されているオブジェクトがデータ バインドされている場合、現在の選択内容またはスコープのデータ コンテキスト プロパティ (DataContext) またはデザインタイム コンテキスト プロパティ (d:DataContext) が [データ コンテキスト] カテゴリに表示されます。

    データ パネルの [データ コンテキスト] カテゴリ

    [データ コンテキスト] カテゴリの表示は、[データ] パネルで [リスト モード] と [詳細モード] を切り替えると変更されます。データ バインドは、目的のデータを [データ コンテキスト] カテゴリからアートボードの要素に直接ドラッグして作成することもできます。

    Noteメモ :

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

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

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

データ フロー

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

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

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

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

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

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

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

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

Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(ja-jp,Expression.40).png

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

  1. [プロパティ] パネルで、TextBox の Text プロパティに関連付けられている [詳細オプション] ボタン Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(ja-jp,Expression.40).png ([共通プロパティ] の下) をクリックし、[データ バインド] をクリックします。

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

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

バインドの種類 結果

OneWay

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

TwoWay

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

OneWayToSource

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

OneTime

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

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

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

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

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

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

    Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(ja-jp,Expression.40).png

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

    Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(ja-jp,Expression.40).png

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

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

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

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

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

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

データ テンプレート

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

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

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

データ ビヘイビアー

プロパティをアートボードにドラッグして既存のオブジェクトをバインドする機能、新しいバインド オブジェクトを作成する機能、またはデザインタイム データ コンテキストを設定する機能に加えて、[データ] パネルからコマンドとメソッドをアートボードのオブジェクトにドラッグできます。

コマンドをオブジェクトにドラッグすると、コマンドを呼び出す InvokeCommandAction アクションが作成されます。その後、[プロパティ] パネルでオブジェクトがコマンドをトリガーする方法を構成できます。同様に、メソッドをアートボードにドラッグすると、同じ方法で構成できる CallMethodAction アクションが作成されます。

InvokeCommandAction および CallMethodAction の詳細については、「InvokeCommandAction」および「CallMethodAction」を参照してください。

関連項目

概念

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.