WPF コントロールを WCF データ サービスにバインドする

このチュートリアルでは、データ バインド コントロールを含む WPF アプリケーションを作成します。 コントロールは、WCF データ サービスにカプセル化された顧客レコードにバインドされます。 また、顧客がレコードの表示と更新に使用できるボタンも追加します。

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

• AdventureWorksLT サンプル データベースのデータから生成されるエンティティ データ モデルの作成。

• エンティティ データ モデルのデータを WPF アプリケーションに公開する WCF データ サービスを作成する。

• データソースウィンドウから項目をWPFデザイナーにドラッグして、データバインドされたコントロールのセットを生成します。

• 顧客レコードを前後に移動するボタンの作成。

• コントロール内のデータへの変更を WCF Data Service と基になるデータ ソースに保存するボタンを作成します。

[前提条件]

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

• Visual Studio

• AdventureWorksLT サンプル データベースがアタッチされている SQL Server または SQL Server Express の実行中のインスタンスへのアクセス。 データベースをダウンロードするには、AdventureWorks サンプル データベースを参照してください。

次の概念に関する以前の知識も役立ちますが、チュートリアルを完了する必要はありません。

• WCF Data Services。

• WCF Data Services のデータ モデル。

• エンティティ データ モデルと ADO.NET Entity Framework。 詳細については、「 Entity Framework の概要」を参照してください。

• WPF データ バインディング。 詳細については、「 データ バインディングの概要」を参照してください。

サービス プロジェクトを作成する

1. C# または Visual Basic ASP.NET Web アプリケーション プロジェクトを作成して、このチュートリアルを開始します。 プロジェクトに AdventureWorksService という名前を付けます。

2. ソリューション エクスプローラーで、Default.aspxを右クリックし、[削除] を選択します。 このファイルは、このチュートリアルでは必要ありません。

サービスのエンティティ データ モデルを作成する

WCF Data Service を使用してアプリケーションにデータを公開するには、サービスのデータ モデルを定義する必要があります。 WCF Data Service では、エンティティ データ モデルと、 IQueryable<T> インターフェイスを実装する共通言語ランタイム (CLR) オブジェクトを使用して定義されたカスタム データ モデルの 2 種類のデータ モデルがサポートされています。 このチュートリアルでは、データ モデルのエンティティ データ モデルを作成します。

1. [プロジェクト] メニューの [新しい項目の追加] クリックします。

2. [インストールされているテンプレート] ボックスの一覧で[ データ] をクリックし、 ADO.NET Entity Data Model プロジェクト項目を選択します。

3. 名前を AdventureWorksModel.edmxに変更し、[ 追加] をクリックします。

   エンティティ データ モデル ウィザードが開きます。

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

5. [ データ接続の選択 ] ページで、次のいずれかのオプションを選択します。

   • AdventureWorksLT サンプル データベースへのデータ接続がドロップダウン リストで使用できる場合は、それを選択します。

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

6. [ データ接続の選択 ] ページ で、[App.Config にエンティティ接続設定を保存 する] オプションが選択されていることを確認し、[ 次へ] を選択します。

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

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

サービスを作成する

エンティティ データ モデル内のデータを WPF アプリケーションに公開する WCF データ サービスを作成します。

1. [ プロジェクト ] メニューの [ 新しい項目の追加] を選択します。

2. [ インストールされているテンプレート ] ボックスの一覧で[ Web] をクリックし、 WCF Data Service プロジェクト項目を選択します。

3. [ 名前 ] ボックスに「 AdventureWorksService.svc」と入力し、[ 追加] をクリックします。

   Visual Studio によってプロジェクトに AdventureWorksService.svc が追加されます。

サービスの構成

作成したエンティティ データ モデルで動作するようにサービスを構成する必要があります。

1. AdventureWorks.svc コード ファイルで、AdventureWorksService クラス宣言を次のコードに置き換えます。

   • C#
   • VB

   public class AdventureWorksService : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(IDataServiceConfiguration config)
       {
           config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
       }
   }
   

   このコードは、Entity Data Model のAdventureWorksLTEntities オブジェクト コンテキスト クラスで動作するDataService<T>から派生するように AdventureWorksService クラスを更新します。 また、 InitializeService メソッドを更新して、サービスのクライアントが SalesOrderHeader エンティティへの完全な読み取り/書き込みアクセスを許可します。

2. プロジェクトをビルドし、エラーなしでビルドされることを確認します。

WPF クライアント アプリケーションを作成する

WCF Data Service のデータを表示するには、サービスに基づくデータ ソースを使用して新しい WPF アプリケーションを作成します。 このチュートリアルの後半では、データ バインド コントロールをアプリケーションに追加します。

1. ソリューション エクスプローラーで、ソリューション ノードを右クリックし、[追加] をクリックして、[新しいプロジェクト] を選択します。

2. [ 新しいプロジェクト ] ダイアログで、[ Visual C# ] または [ Visual Basic] を展開し、[ Windows] を選択します。

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

4. [ 名前 ] ボックスに「 AdventureWorksSalesEditor」と入力し、[ OK] をクリックします。

   Visual Studio によって、 AdventureWorksSalesEditor プロジェクトがソリューションに追加されます。

5. [ データ ] メニューの [ データ ソースの表示] をクリックします。

   [ データ ソース] ウィンドウが開きます。

6. [データ ソース] ウィンドウで、 [新しいデータ ソースの追加]をクリックします。

   データ ソース構成ウィザードが開きます。

7. ウィザードの [ データ ソースの種類の選択 ] ページで、[ サービス] を選択し、[ 次へ] を選択します。

8. [ サービス参照の追加 ] ダイアログ ボックスで、[ 検出] をクリックします。

   Visual Studio は、現在のソリューションで使用可能なサービスを検索し、[サービス] ボックスの利用可能なサービスの一覧にAdventureWorksService.svcを追加します。

9. [ 名前空間 ] ボックスに「 AdventureWorksService」と入力します。

10. [ サービス ] ボックスで、[ AdventureWorksService.svc] をクリックし、[ OK] を選択します。

    Visual Studio によってサービス情報がダウンロードされ、 データ ソース構成 ウィザードに戻ります。

11. [ サービス参照の追加 ] ページで、[完了] をクリック します。

    Visual Studio は、サービスによって返されるデータを表すノードを [ データ ソース] ウィンドウに追加します。

ユーザー インターフェイスを定義する

WPF デザイナーで XAML を変更して、ウィンドウにいくつかのボタンを追加します。 このチュートリアルの後半では、ユーザーがこれらのボタンを使用して売上レコードを表示および更新できるようにするコードを追加します。

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

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

2. デザイナーの XAML ビューで、 <Grid> タグの間に次のコードを追加します。

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="525" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

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

データ バインド コントロールを作成する

[データ ソース] ウィンドウからデザイナーに SalesOrderHeaders ノードをドラッグして、顧客レコードを表示するコントロールを作成します。

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

2. SalesOrderHeaders ノードを展開します。

3. この例では、一部のフィールドは表示されないため、次のノードの横にあるドロップダウン リスト メニューをクリックし、[ なし] を選択します。

   • CreditCardApprovalCode

   • ModifiedDate

   • OnlineOrderFlag

   • RevisionNumber

   • rowguid

   このアクションにより、Visual Studio は次の手順でこれらのノードのデータ バインド コントロールを作成できなくなります。 このチュートリアルでは、エンド ユーザーがこのデータを表示する必要はないことを前提としています。

4. [ データ ソース ] ウィンドウから、 SalesOrderHeaders ノードを、ボタンを含む行の下のグリッド行にドラッグします。

   Visual Studio では、 Product テーブル内のデータにバインドされるコントロールのセットを作成する XAML とコードが生成されます。 生成された XAML とコードの詳細については、「 Visual Studio で WPF コントロールをデータにバインドする」を参照してください。

5. デザイナーで、[ 顧客 ID ] ラベルの横にあるテキスト ボックスをクリックします。

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

7. 次の各テキスト ボックス に IsReadOnly プロパティを設定します。

   • 発注書番号

   • 販売注文 ID

   • 販売注文番号

サービスからデータを読み込む

サービス プロキシ オブジェクトを使用して、サービスから売上データを読み込みます。 次に、返されたデータを WPF ウィンドウの CollectionViewSource のデータ ソースに割り当てます。

1. デザイナーで、 Window_Loaded イベント ハンドラーを作成するには、 MainWindow というテキストをダブルクリックします。

2. イベント ハンドラーを次のコードに置き換えます。 このコードの localhost アドレスを、開発用コンピューターのローカル ホスト アドレスに置き換えてください。

   • C#
   • VB

   private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
   private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
   private CollectionViewSource ordersViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       // TODO: Modify the port number in the following URI as required.
       dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
           new Uri("http://localhost:45899/AdventureWorksService.svc"));
       salesQuery = dataServiceClient.SalesOrderHeaders;
   
       ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
       ordersViewSource.Source = salesQuery.Execute();
       ordersViewSource.View.MoveCurrentToFirst();
   }
   

売上レコード間を移動する

<ボタンと>ボタンを使用して、ユーザーが売上レコードをスクロールできるようにするコードを追加します。

1. デザイナーで、ウィンドウ画面の [ < ] ボタンをダブルクリックします。

   Visual Studio でコードビハインドファイルを開き、backButton_Click イベントのために新しい Click イベントハンドラを作成します。

2. 生成された backButton_Click イベント ハンドラーに次のコードを追加します。

   • C#
   • VB

   if (ordersViewSource.View.CurrentPosition > 0)
       ordersViewSource.View.MoveCurrentToPrevious();
   

3. デザイナーに戻り、[ > ] ボタンをダブルクリックします。

   Visual Studio でコードビハインドファイルを開き、nextButton_Click イベントのために新しい Click イベントハンドラを作成します。

4. 生成された nextButton_Click イベント ハンドラーに次のコードを追加します。

   • C#
   • VB

   if (ordersViewSource.View.CurrentPosition < ((CollectionView)ordersViewSource.View).Count - 1)
   {
       ordersViewSource.View.MoveCurrentToNext();
   }
   

売上レコードへの変更を保存する

[ 変更の保存 ] ボタンを使用して、ユーザーが売上レコードの変更を表示および保存できるようにするコードを追加します。

1. デザイナーで、[ 変更の保存 ] ボタンをダブルクリックします。

   Visual Studio でコードビハインドファイルを開き、saveButton_Click イベントのために新しい Click イベントハンドラを作成します。

2. saveButton_Click イベント ハンドラーに次のコードを追加します。

   • C#
   • VB

   AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
   dataServiceClient.UpdateObject(currentOrder);
   dataServiceClient.SaveChanges();
   

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

アプリケーションをビルドして実行し、顧客レコードを表示および更新できることを確認します。

1. [ ビルド ] メニューの [ ソリューションのビルド] をクリックします。 ソリューションがエラーなしでビルドされることを確認します。

2. Ctrl+F5 キーを押します。

   Visual Studio は、 デバッグせずに AdventureWorksService プロジェクトを起動します。

3. ソリューション エクスプローラーで、AdventureWorksSalesEditor プロジェクトを右クリックします。

4. 右クリック メニュー (コンテキスト メニュー) で、[ デバッグ] の [ 新しいインスタンスの開始] をクリックします。

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

   • テキスト ボックスには、販売注文 ID が 71774 である最初の販売レコードのさまざまなフィールドのデータが表示されます。

   • >または<ボタンをクリックすると、他の販売レコード間を移動できます。

5. いずれかの売上レコードで、[ コメント ] ボックスにテキストを入力し、[ 変更の保存] を選択します。

6. アプリケーションを閉じ、Visual Studio からアプリケーションをもう一度起動します。

7. 変更した売上レコードに移動し、アプリケーションを閉じて再度開いた後も変更が保持されることを確認します。

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

次のステップ

このチュートリアルを完了すると、次の関連タスクを実行できます。

• Visual Studio の [ データ ソース] ウィンドウを使用して、WPF コントロールを他の種類のデータ ソースにバインドする方法について説明します。 詳細については、「 WPF コントロールをデータセットにバインドする」を参照してください。

• Visual Studio の [ データ ソース] ウィンドウを使用して、関連するデータ (つまり、親子関係のデータ) を WPF コントロールに表示する方法について説明します。 詳細については、「 チュートリアル: WPF アプリケーションでの関連データの表示」を参照してください。

関連コンテンツ

• Visual Studio で WPF コントロールをデータにバインドする
• WPF コントロールをデータセットにバインドする
• WCF の概要 (.NET Framework)
• Entity Framework の概要 (.NET Framework)
• データ バインディングの概要 (.NET Framework)