チュートリアル: WPF アプリケーションでの関連データの表示
このチュートリアルでは、親子のリレーションシップを持つデータベース テーブルのデータを表示する WPF アプリケーションを作成します。 データは、Entity Data Model のエンティティにカプセル化されます。 親エンティティには、一連の注文についての概要情報が含まれます。 このエンティティの各プロパティは、アプリケーション内の別々のコントロールにバインドされます。 子エンティティには、各注文の詳細が含まれます。 このデータ セットは、DataGrid コントロールにバインドされます。
このチュートリアルでは、次の作業について説明します。
WPF アプリケーションと、AdventureWorksLT サンプル データベースのデータから生成される Entity Data Model を作成する。
一連の注文についての概要情報を表示するデータ バインド コントロール セットを作成する。 [データ ソース] ウィンドウから WPF デザイナーに親エンティティをドラッグして、コントロールを作成します。
選択した注文ごとに関連する詳細情報を表示する DataGrid コントロールを作成する。 [データ ソース] ウィンドウから WPF デザイナー内のウィンドウに子エンティティをドラッグして、コントロールを作成します。
注意
次の手順で参照している Visual Studio ユーザー インターフェイス要素の一部は、お使いのコンピューターでは名前や場所が異なる場合があります。 これらの要素は、使用する Visual Studio のエディションとその設定によって決まります。 詳細については、「設定の操作」を参照してください。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
Visual Studio 2010.
AdventureWorksLT サンプル データベースがアタッチされた、SQL Server または SQL Server Express の実行中のインスタンスへのアクセス。 AdventureWorksLT データベースは、CodePlex の Web サイトからダウンロードできます。
次の概念に関する予備知識があると役に立ちますが、チュートリアルを完了するうえで必須ではありません。
Entity Data Model および ADO.NET Entity Framework。 詳細については、「Entity Data Model」および「Introducing the Entity Framework」を参照してください。
WPF デザイナーの操作。 詳細については、「WPF および Silverlight デザイナーの概要」を参照してください。
WPF のデータ バインディング。 詳細については、「データ バインディングの概要」を参照してください。
プロジェクトの作成
注文レコードを表示するには、新しい WPF プロジェクトを作成します。
新しい WPF プロジェクトを作成するには
Visual Studio を起動します。
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[Visual C#] または [Visual Basic] を展開し、[Windows] を選択します。
ダイアログ ボックスの上部のコンボ ボックスで、[.NET Framework 4] が選択されていることを確認します。 このチュートリアルで使用する DataGrid コントロールは、.NET Framework 4 でのみ使用できます。
[WPF アプリケーション] プロジェクト テンプレートを選択します。
[プロジェクト名] ボックスに「AdventureWorksOrdersViewer」と入力します。
[OK] をクリックします。
Visual Studio によって、AdventureWorksOrdersViewer プロジェクトが作成されます。
アプリケーションで使用する Entity Data Model の作成
データ バインド コントロールを作成するには、アプリケーションで使用するデータ モデルを定義し、[データ ソース] ウィンドウに追加する必要があります。 このチュートリアルで使用するデータ モデルは Entity Data Model です。
Entity Data Model を作成するには
[データ] メニューで、[新しいデータ ソースの追加] をクリックし、データ ソース構成ウィザードを起動します。
[データソースの種類を選択] ページで、[データベース] を選択し、[次へ] をクリックします。
[データベース モデルの選択] ページで、[Entity Data Model] をクリックし、[次へ] をクリックします。
[モデルのコンテンツの選択] ページで、[データベースから生成] をクリックし、[次へ] をクリックします。
[データ接続の選択] ページで、次のいずれかの操作を実行します。
AdventureWorksLT サンプル データベースへのデータ接続がドロップダウン リストに表示されている場合は、それを選択します。
または
[新しい接続] をクリックし、AdventureWorksLT データベースへの接続を作成します。
[エンティティ接続設定に名前を付けて App.Config に保存] オプションが選択されていることを確認し、[次へ] をクリックします。
[データベース オブジェクトの選択] ページで、[テーブル] を展開し、次のテーブルを選択します。
SalesOrderDetail
SalesOrderHeader
[完了] をクリックします。
プロジェクトをビルドします。
注文を表示するデータ バインド コントロールの作成
注文レコードを表示するコントロールを作成するには、[データ ソース] ウィンドウから WPF デザイナーに SalesOrderHeaders エンティティをドラッグします。
注文レコードを表示するデータ バインド コントロールを作成するには
ソリューション エクスプローラーで、MainWindow.xaml をダブルクリックします。
WPF デザイナーでウィンドウが開きます。
XAML を編集して、Height プロパティと Width プロパティを 800 に設定します。
[データ ソース] ウィンドウで、[SalesOrderHeaders] ノードのドロップダウン メニューをクリックし、[詳細] を選択します。
[SalesOrderHeaders] ノードを展開します。
[SalesOrderID] の横にあるドロップダウン メニューをクリックし、[ComboBox] を選択します。
[SalesOrderHeaders] ノードの次の各子ノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。
RevisionNumber
OnlineOrderFlag
ShipToAddressID
BillToAddressID
CreditCardApprovalCode
SubTotal
TaxAmt
Freight
rowguid
ModifiedDate
この操作は、次の手順において、これらのノードに対応するデータ バインド コントロールが Visual Studio で作成されるのを防ぎます。 このチュートリアルでは、これらのデータをエンド ユーザーが参照する必要はありません。
[データ ソース] ウィンドウから WPF デザイナー内のウィンドウに、[SalesOrderHeaders] ノードをドラッグします。
Visual Studio によって、SalesOrderHeaders エンティティのデータにバインドされるコントロール セットを作成する XAML と、データを読み込むコードが生成されます。 生成される XAML とコードの詳細については、「Visual Studio でのデータへの WPF コントロールのバインド」を参照してください。
デザイナーで、[Sales Order ID] ラベルの横にあるコンボ ボックスをクリックします。
[プロパティ] ウィンドウで、IsReadOnly プロパティの横にあるチェック ボックスをオンにします。
注文の詳細を表示する DataGrid の作成
注文の詳細を表示する DataGrid コントロールを作成するには、[データ ソース] ウィンドウから WPF デザイナーに SalesOrderDetails エンティティをドラッグします。
注文の詳細を表示する DataGrid を作成するには
[データ ソース] ウィンドウで、[SalesOrderHeaders] ノードの子である [SalesOrderDetails] ノードを検索します。
注意
[SalesOrderDetails] ノードの中には、[SalesOrderHeaders] ノードのピアであるものもあります。 必ず [SalesOrderHeaders] ノードの子ノードを選択するようにしてください。
子の [SalesOrderDetails] ノードを展開します。
[SalesOrderDetails] ノードの次の各子ノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。
SalesOrderID
SalesOrderDetailID
rowguid
ModifiedDate
この操作は、次の手順において、このデータが Visual Studio によって DataGrid コントロールに追加されるのを防ぎます。 このチュートリアルでは、これらのデータをエンド ユーザーが参照する必要はありません。
[データ ソース] ウィンドウから WPF デザイナー内のウィンドウに、子の [SalesOrderDetails] ノードをドラッグします。
Visual Studio によって、新しいデータ バインド DataGrid コントロールを定義する XAML が生成され、デザイナー内にコントロールが表示されます。 また、分離コード ファイル内に生成された GetSalesOrderHeadersQuery メソッドも、SalesOrderDetails エンティティのデータを含めるように更新されます。
アプリケーションのテスト
アプリケーションをビルドして実行し、注文レコードが表示されることを確認します。
アプリケーションをテストするには
F5 キーを押します。
アプリケーションがビルドされ、実行されます。 次の点を確認します。
[Sales Order ID] コンボ ボックスに "71774" と表示されます。 これはエンティティの最初の注文 ID です。
[Sales Order ID] ボックスの一覧で選択した注文ごとに、詳細な注文情報が DataGrid に表示されること。
アプリケーションを閉じます。
次の手順
このチュートリアルを完了したら、Visual Studio で [データ ソース] ウィンドウを使用して、WPF コントロールを他の種類のデータ ソースにバインドする方法を学習できます。 詳細については、「チュートリアル: WCF Data Service への WPF コントロールのバインド」および「チュートリアル: データセットへの WPF コントロールのバインド」を参照してください。