チュートリアル: WCF Data Service への WPF コントロールのバインド

[アーティクル]
02/21/2013

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

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

AdventureWorksLT サンプルデータベースのデータから生成される Entity Data Model を作成する。
WPF アプリケーションに Entity Data Model のデータを公開する WCF Data Servicesを作成する。
[データソース] ウィンドウから WPF デザイナーに項目をドラッグして、一連のデータバインドコントロールを作成する。
顧客レコード間を前後に移動するためのボタンを作成する。
コントロールでのデータの変更を、WCF Data Servicesおよび基になるデータソースに保存するボタンを作成する。

[!メモ]

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

必須コンポーネント

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

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

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

WCF Data Services。詳細については、「ADO.NET Data Services Framework Overview」を参照してください。
WCF Data Services のデータモデル。
エンティティデータモデルおよび ADO.NET Entity Framework。詳細については、「Introducing the Entity Framework」を参照してください。
WPF デザイナーの操作。詳細については、「WPF および Silverlight デザイナーの概要」を参照してください。
WPF のデータバインディング。詳細については、「データバインディングの概要」を参照してください。

サービスプロジェクトの作成

まず、WCF Data Servicesのプロジェクトを作成します。

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

Visual Studio を起動します。
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[Visual C#] または [Visual Basic] を展開し、[Web] を選択します。
[ASP.NET Web アプリケーション] プロジェクトテンプレートを選択します。
[プロジェクト名] ボックスに「AdventureWorksService」と入力し、[OK] をクリックします。

Visual Studio によって、AdventureWorksService プロジェクトが作成されます。
ソリューションエクスプローラーで、Default.aspx を右クリックし、[削除] をクリックします。このファイルは、このチュートリアルでは使用しません。

サービスで使用する Entity Data Model の作成

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

Entity Data Model を作成するには

[プロジェクト] メニューの [新しい項目の追加] をクリックします。
インストールされたテンプレートリストで、[データ] をクリックし、[ADO.NET エンティティデータモデル] プロジェクト項目を選択します。
名前を「AdventureWorksModel.edmx」に変更し、[追加] をクリックします。

Entity Data Model ウィザードが開きます。
[モデルのコンテンツの選択] ページで、[データベースから生成] をクリックし、[次へ] をクリックします。
[データ接続の選択] ページで、次のいずれかのオプションを選択します。
- AdventureWorksLT サンプルデータベースへのデータ接続がドロップダウンリストに表示されている場合は、それを選択します。
  
  または
- [新しい接続] をクリックし、AdventureWorksLT データベースへの接続を作成します。
[データ接続の選択] ページで、[エンティティ接続設定に名前を付けて App.Config に保存] オプションが選択されていることを確認し、[次へ] をクリックします。
[データベースオブジェクトの選択] ページで、[テーブル] を展開し、SalesOrderHeader テーブルを選択します。
[完了] をクリックします。

サービスの作成

WPF アプリケーションに Entity Data Model のデータを公開する WCF Data Servicesを作成します。

サービスを作成するには

[プロジェクト] メニューの [新しい項目の追加] をクリックします。
インストールされたテンプレートリストで、[Web] をクリックし、[WCF Data Service] プロジェクト項目を選択します。
[プロジェクト名] ボックスに「AdventureWorksService.svc」と入力し、[追加] をクリックします。

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

サービスの構成

作成した Entity Data Model を操作するには、サービスを構成する必要があります。

サービスを構成するには

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

Public Class AdventureWorksService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies.
    Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
        config.UseVerboseErrors = True
    End Sub
End Class

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);
    }
}

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

プロジェクトをビルドし、エラーが発生しないことを確認します。

WPF クライアントアプリケーションの作成

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

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

ソリューションエクスプローラーでソリューションノードを右クリックし、[追加] をポイントして、[新しいプロジェクト] をクリックします。
[新しいプロジェクト] ダイアログで、[Visual C#] または [Visual Basic] を展開し、[Windows] を選択します。
[WPF アプリケーション] プロジェクトテンプレートを選択します。
[プロジェクト名] ボックスに「AdventureWorksSalesEditor」と入力し、[OK] をクリックします。

Visual Studio によって、ソリューションに AdventureWorksSalesEditor プロジェクトが追加されます。
[データ] メニューの [データソースの表示] をクリックします。

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

データソース構成ウィザードが開きます。
ウィザードの [データソースの種類を選択] ページで、[サービス] を選択し、[次へ] をクリックします。
[サービス参照の追加] ダイアログボックスで [探索] をクリックします。

Visual Studio によって、使用できるサービスが現在のソリューションから検索され、[サービス] ボックスの使用できるサービスの一覧に AdventureWorksService.svc が追加されます。
[名前空間] ボックスに「AdventureWorksService」と入力します。
[サービス] ボックスの [AdventureWorksService.svc] をクリックし、[OK] をクリックします。

Visual Studio によってサービス情報がダウンロードされ、データソース構成ウィザードに戻ります。
[サービス参照の追加] ページで、[完了] をクリックします。

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

ウィンドウのユーザーインターフェイスの定義

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

ウィンドウレイアウトを作成するには

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

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

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

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

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

データバインドコントロールの作成

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

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

[データソース] ウィンドウで、[SalesOrderHeaders] ノードのドロップダウンメニューをクリックし、[詳細] を選択します。
[SalesOrderHeaders] ノードを展開します。
この例では、いくつかのフィールドを非表示にするために、次のノードの横にあるドロップダウンメニューをクリックし、[なし] を選択します。
- CreditCardApprovalCode
- ModifiedDate
- OnlineOrderFlag
- RevisionNumber
- rowguid
この操作は、次の手順において、これらのノードに対応するデータバインドコントロールが Visual Studio で作成されるのを防ぎます。このチュートリアルでは、これらのデータをエンドユーザーが参照する必要はありません。
[データソース] ウィンドウから、ボタンがある行の下のグリッド行に [SalesOrderHeaders] ノードをドラッグします。

Visual Studio によって、Product テーブルのデータにバインドされるコントロールセットを作成する XAML とコードが生成されます。生成される XAML とコードの詳細については、「Visual Studio でのデータへの WPF コントロールのバインド」を参照してください。
デザイナーで、[Customer ID] ラベルの横にあるテキストボックスをクリックします。
[プロパティ] ウィンドウで、IsReadOnly プロパティの横にあるチェックボックスをオンにします。
次の各テキストボックスに IsReadOnly プロパティを設定します。
- [Purchase Order Number]
- [Sales Order ID]
- [Sales Order Number]

サービスからのデータの読み込み

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

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

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

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

Private DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
Private OrdersViewSource As CollectionViewSource

Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded

    ' TODO: Modify the port number in the following URI as required.
    DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
    New Uri("https://localhost:32415/AdventureWorksService.svc"))
    SalesQuery = DataServiceClient.SalesOrderHeaders

    OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
    OrdersViewSource.Source = SalesQuery.Execute()
    OrdersViewSource.View.MoveCurrentToFirst()
End Sub

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("https://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

販売レコード間の移動

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

ユーザーが販売レコード間を移動できるようにするには

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

Visual Studio で分離コードファイルが開き、Click イベントに対する新しい backButton_Click イベントハンドラーが作成されます。

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

If OrdersViewSource.View.CurrentPosition > 0 Then
    OrdersViewSource.View.MoveCurrentToPrevious()
End If

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

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

Visual Studio で分離コードファイルが開き、Click イベントの新しい nextButton_Click イベントハンドラーが作成されます。

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

If OrdersViewSource.View.CurrentPosition < CType(OrdersViewSource.View, CollectionView).Count - 1 Then
    OrdersViewSource.View.MoveCurrentToNext()
End If

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

販売レコードへの変更の保存

販売レコードを表示するだけでなく、ユーザーが [Save changes] ボタンを使用して変更を保存できるようにするコードも追加します。

販売レコードへの変更を保存する機能を追加するには

デザイナーで、[Save changes] ボタンをダブルクリックします。

Visual Studio で分離コードファイルが開き、Click イベントの新しい saveButton_Click イベントハンドラーが作成されます。

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

Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)

DataServiceClient.UpdateObject(CurrentOrder)
DataServiceClient.SaveChanges()

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

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

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

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

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

Visual Studio によって、AdventureWorksService プロジェクトがデバッグなしで開始されます。
ソリューションエクスプローラーで、[AdventureWorksSalesEditor] プロジェクトを右クリックします。
コンテキストメニューの [デバッグ] をポイントし、[新しいインスタンスを開始] をクリックします。

アプリケーションが実行されます。次の点を確認します。
- テキストボックスに、先頭の販売レコードの各種データフィールドが表示されること。このレコードの Sales Order ID は 71774 です。
- [>] ボタンまたは [<] ボタンをクリックして、他の販売レコードに移動できること。
いずれかの販売レコードの [Comment] ボックスに任意のテキストを入力し、[Save changes] をクリックします。
アプリケーションを終了し、Visual Studio からもう一度アプリケーションを起動します。
変更した販売レコードに移動し、アプリケーションを終了して再起動した後でも変更が保持されていることを確認します。
アプリケーションを閉じます。

次の手順

このチュートリアルを完了したら、関連する次の作業を行うことができます。

Visual Studio で [データソース] ウィンドウを使用して、WPF コントロールを他の種類のデータソースにバインドする方法を学習する。詳細については、「チュートリアル: Entity Data Model への WPF コントロールのバインド」および「チュートリアル: データセットへの WPF コントロールのバインド」を参照してください。
Visual Studio で [データソース] ウィンドウを使用して、関連するデータ (つまり、親子のリレーションシップを持つデータ) を WPF コントロールで表示する方法を学習する。詳細については、「チュートリアル: WPF アプリケーションでの関連データの表示」を参照してください。

参照

チュートリアル: WCF Data Service への WPF コントロールのバインド

必須コンポーネント

サービス プロジェクトの作成

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