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

[アーティクル]
02/15/2017

公開日: 2016年4月

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

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

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

注意

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

必須コンポーネント

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

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

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

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

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

このチュートリアルでは、まず WCF Data Service のプロジェクトを作成します。

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

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

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

サービスの Entity Data Model の作成

WCF Data Service を使用してアプリケーションにデータを公開するには、サービスのデータモデルを定義する必要があります。 WCF Data Service は、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 Service を作成します。

サービスを作成するには

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

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

サービスの構成

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

サービスを構成するには

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

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

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

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

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

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

WCF Data Service のデータを表示するには、サービスに基づくデータソースを使用して、新しい 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"><</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>

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

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

顧客レコードを表示するコントロールを作成するには、[データソース] ウィンドウからデザイナーに [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 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();
        }

    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

販売レコード間の移動

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

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

デザイナーで、ウィンドウサーフェイスの [<] をダブルクリックします。

Visual Studio によって分離コードファイルが開かれ、Click イベントのために、新しい backButton_Click イベントハンドラーが作成されます。

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

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

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

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

Visual Studio によって分離コードファイルが開かれ、Click イベントのために、新しい nextButton_Click イベントハンドラーが作成されます。

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

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

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

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

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

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

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

Visual Studio によって分離コードファイルが開かれ、Click イベントのために、新しい saveButton_Click イベントハンドラーが作成されます。

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

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

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

        DataServiceClient.UpdateObject(CurrentOrder)
        DataServiceClient.SaveChanges()

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

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

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

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

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

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

次の手順

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

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

参照

Visual Studio でのデータへの WPF コントロールのバインド
 方法: Visual Studio でデータに WPF コントロールをバインドする
 チュートリアル: データセットへの WPF コントロールのバインド
 概要
 エンティティフレームワークの概要
 WPF および Silverlight デザイナーの概要
 データバインドの概要

Share via

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

必須コンポーネント

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

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

サービスの Entity Data Model の作成

Entity Data Model を作成するには

サービスの作成

サービスを作成するには

サービスの構成

サービスを構成するには

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

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

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

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

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

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

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

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

販売レコード間の移動

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

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

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

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

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

次の手順

参照

その他のリソース

Share via

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

必須コンポーネント

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

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

サービスの Entity Data Model の作成

Entity Data Model を作成するには

サービスの作成

サービスを作成するには

サービスの構成

サービスを構成するには

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

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

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

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

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

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

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

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

販売レコード間の移動

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

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

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

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

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

次の手順

参照

その他のリソース

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

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

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

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

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

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

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

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