次の方法で共有


チュートリアル: WPF アプリケーションでの関連データの表示

このチュートリアルでは、親子のリレーションシップを持つデータベース テーブルのデータを表示する WPF アプリケーションを作成します。データは、Entity Data Model のエンティティにカプセル化されます。親エンティティには、一連の注文についての概要情報が含まれます。このエンティティの各プロパティは、アプリケーション内の別々のコントロールにバインドされます。子エンティティには、各注文の詳細が含まれます。このデータ セットは、DataGrid コントロールにバインドされます。

このチュートリアルでは、次の作業について説明します。

  • WPF アプリケーションと、AdventureWorksLT サンプル データベースのデータから生成される Entity Data Model を作成する。

  • 一連の注文についての概要情報を表示するデータ バインド コントロール セットを作成する。[データ ソース] ウィンドウから WPF デザイナーに親エンティティをドラッグして、コントロールを作成します。

  • 選択した注文ごとに関連する詳細情報を表示する DataGrid コントロールを作成する。[データ ソース] ウィンドウから WPF デザイナー内のウィンドウに子エンティティをドラッグして、コントロールを作成します。

    [!メモ]

    お使いのマシンで、Visual Studio ユーザー インターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

  • Visual Studio.

  • AdventureWorksLT サンプル データベースがアタッチされた、SQL Server または SQL Server Express の実行中のインスタンスへのアクセス。AdventureWorksLT データベースは、CodePlex の Web サイトからダウンロードできます。

次の概念に関する予備知識があると役に立ちますが、チュートリアルを完了するうえで必須ではありません。

プロジェクトの作成

注文レコードを表示するには、新しい WPF プロジェクトを作成します。

新しい WPF プロジェクトを作成するには

  1. Visual Studio を起動します。

  2. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

  3. [Visual C#] または [Visual Basic] を展開し、[Windows] を選択します。

  4. ダイアログ ボックスの上部のコンボ ボックスで、[.NET Framework 4] が選択されていることを確認します。このチュートリアルで使用する DataGrid コントロールは、.NET Framework 4 でのみ使用できます。

  5. [WPF アプリケーション] プロジェクト テンプレートを選択します。

  6. [プロジェクト名] ボックスに「AdventureWorksOrdersViewer」と入力します。

  7. [OK] をクリックします。

    Visual Studio によって、AdventureWorksOrdersViewer プロジェクトが作成されます。

アプリケーションで使用する Entity Data Model の作成

データ バインド コントロールを作成するには、アプリケーションで使用するデータ モデルを定義し、[データ ソース] ウィンドウに追加する必要があります。このチュートリアルで使用するデータ モデルは Entity Data Model です。

Entity Data Model を作成するには

  1. [データ] メニューで、[新しいデータ ソースの追加] をクリックし、データ ソース構成ウィザードを起動します。

  2. [データソースの種類を選択] ページで、[データベース] を選択し、[次へ] をクリックします。

  3. [データベース モデルの選択] ページで、[Entity Data Model] をクリックし、[次へ] をクリックします。

  4. [モデルのコンテンツの選択] ページで、[データベースから生成] をクリックし、[次へ] をクリックします。

  5. [データ接続の選択] ページで、次のいずれかの操作を実行します。

    • AdventureWorksLT サンプル データベースへのデータ接続がドロップダウン リストに表示されている場合は、それを選択します。

      または

    • [新しい接続] をクリックし、AdventureWorksLT データベースへの接続を作成します。

    [エンティティ接続設定に名前を付けて App.Config に保存] オプションが選択されていることを確認し、[次へ] をクリックします。

  6. [データベース オブジェクトの選択] ページで、[テーブル] を展開し、次のテーブルを選択します。

    • SalesOrderDetail

    • SalesOrderHeader

  7. [完了] をクリックします。

  8. プロジェクトをビルドします。

注文を表示するデータ バインド コントロールの作成

注文レコードを表示するコントロールを作成するには、[データ ソース] ウィンドウから WPF デザイナーに SalesOrderHeaders エンティティをドラッグします。

注文レコードを表示するデータ バインド コントロールを作成するには

  1. ソリューション エクスプローラーで、MainWindow.xaml をダブルクリックします。

    WPF デザイナーでウィンドウが開きます。

  2. XAML を編集して、Height プロパティと Width プロパティを 800 に設定します。

  3. [データ ソース] ウィンドウで、[SalesOrderHeaders] ノードのドロップダウン メニューをクリックし、[詳細] を選択します。

  4. [SalesOrderHeaders] ノードを展開します。

  5. [SalesOrderID] の横にあるドロップダウン メニューをクリックし、[ComboBox] を選択します。

  6. [SalesOrderHeaders] ノードの次の各子ノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。

    • RevisionNumber

    • OnlineOrderFlag

    • ShipToAddressID

    • BillToAddressID

    • CreditCardApprovalCode

    • SubTotal

    • TaxAmt

    • Freight

    • rowguid

    • ModifiedDate

    この操作は、次の手順において、これらのノードに対応するデータ バインド コントロールが Visual Studio で作成されるのを防ぎます。このチュートリアルでは、これらのデータをエンド ユーザーが参照する必要はありません。

  7. [データ ソース] ウィンドウから WPF デザイナー内のウィンドウに、[SalesOrderHeaders] ノードをドラッグします。

    Visual Studio によって、SalesOrderHeaders エンティティのデータにバインドされるコントロール セットを作成する XAML と、データを読み込むコードが生成されます。生成される XAML とコードの詳細については、「Visual Studio でのデータへの WPF コントロールのバインド」を参照してください。

  8. デザイナーで、[Sales Order ID] ラベルの横にあるコンボ ボックスをクリックします。

  9. [プロパティ] ウィンドウで、IsReadOnly プロパティの横にあるチェック ボックスをオンにします。

注文の詳細を表示する DataGrid の作成

注文の詳細を表示する DataGrid コントロールを作成するには、[データ ソース] ウィンドウから WPF デザイナーに SalesOrderDetails エンティティをドラッグします。

注文の詳細を表示する DataGrid を作成するには

  1. [データ ソース] ウィンドウで、[SalesOrderHeaders] ノードの子である [SalesOrderDetails] ノードを検索します。

    [!メモ]

    [SalesOrderDetails] ノードの中には、[SalesOrderHeaders] ノードのピアであるものもあります。必ず [SalesOrderHeaders] ノードの子ノードを選択するようにしてください。

  2. 子の [SalesOrderDetails] ノードを展開します。

  3. [SalesOrderDetails] ノードの次の各子ノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。

    • SalesOrderID

    • SalesOrderDetailID

    • rowguid

    • ModifiedDate

    この操作は、次の手順において、このデータが Visual Studio によって DataGrid コントロールに追加されるのを防ぎます。このチュートリアルでは、これらのデータをエンド ユーザーが参照する必要はありません。

  4. [データ ソース] ウィンドウから WPF デザイナー内のウィンドウに、子の [SalesOrderDetails] ノードをドラッグします。

    Visual Studio によって、新しいデータ バインド DataGrid コントロールを定義する XAML が生成され、デザイナー内にコントロールが表示されます。また、分離コード ファイル内に生成された GetSalesOrderHeadersQuery メソッドも、SalesOrderDetails エンティティのデータを含めるように更新されます。

アプリケーションのテスト

アプリケーションをビルドして実行し、注文レコードが表示されることを確認します。

アプリケーションをテストするには

  1. F5 キーを押します。

    アプリケーションがビルドされ、実行されます。次の点を確認します。

    • [Sales Order ID] コンボ ボックスに "71774" と表示されます。これはエンティティの最初の注文 ID です。

    • [Sales Order ID] ボックスの一覧で選択した注文ごとに、詳細な注文情報が DataGrid に表示されること。

  2. アプリケーションを閉じます。

次の手順

このチュートリアルを完了したら、Visual Studio で [データ ソース] ウィンドウを使用して、WPF コントロールを他の種類のデータ ソースにバインドする方法を学習できます。詳細については、「チュートリアル: WCF Data Service への WPF コントロールのバインド」および「チュートリアル: データセットへの WPF コントロールのバインド」を参照してください。

参照

処理手順

方法: WPF アプリケーションで関連データを表示する

概念

Visual Studio でのデータへの WPF コントロールのバインド