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

[アーティクル]
09/12/2015

このチュートリアルでは、データバインドコントロールを含む Silverlight アプリケーションを作成します。コントロールは、WCF Data Services を介してアクセスされる顧客レコードにバインドします。

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

AdventureWorksLT サンプルデータベースのデータから生成されるエンティティデータモデルを作成する。
Silverlight アプリケーションにエンティティデータモデルのデータを公開する WCF Data Services を作成する。
データソース構成ウィザードを実行して [データソース] ウィンドウに読み込まれるデータサービスに接続する。
[データソース] ウィンドウから Silverlight Designer に項目をドラッグして一連のデータバインドコントロールを作成する。
レコード間を前後に移動するためのボタンを作成する。

注意

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

必須コンポーネント

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

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

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

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

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

このチュートリアルを開始するには、WCF Data Services をホストする空の Web アプリケーションプロジェクトを作成します。

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

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

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

WCF Data Services を使用してアプリケーションにデータを公開するには、サービスのデータモデルを定義する必要があります。このチュートリアルでは、エンティティデータモデルを作成します。

Entity Data Model を作成するには

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

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

サービスの作成

エンティティデータモデルのデータを公開する WCF Data Services を作成します。

サービスを作成するには

[プロジェクト] メニューの [新しい項目の追加] をクリックします。
[WCF Data Service] プロジェクト項目をクリックします。
[名前] ボックスに「AdventureWorksDataService.svc」と入力し、[追加] をクリックします。

サービスの構成

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

サービスを構成するには

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

Public Class AdventureWorksDataService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies.
    Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
        config.SetEntitySetAccessRule("*", EntitySetRights.All)
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2
    End Sub

End Class

public class AdventureWorksDataService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(DataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("*", EntitySetRights.All);
        config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
    }
}

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

Silverlight アプリケーションの作成

新しい Silverlight アプリケーションを作成し、サービスにアクセスするデータソースを追加します。

Silverlight アプリケーションを作成するには

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

Silverlight アプリケーションへのデータソースの追加

サービスによって返されるデータに基づくデータソースを作成します。

データソースを作成するには

[データ] メニューの [データソースの表示] をクリックします。
[データソース] ウィンドウで、[新しいデータソースの追加] をクリックします。

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

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

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

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

ウィンドウにボタンを追加するには、Silverlight Designerで XAML を変更します。

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

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

Silverlight Designerで、ウィンドウが開きます。

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

<Grid.RowDefinitions>
    <RowDefinition Height="75" />
    <RowDefinition Height="525" />
</Grid.RowDefinitions>
<Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75" Content="&lt;"></Button>
<Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>

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

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

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

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

[データソース] ウィンドウで、[Customers] ノードのドロップダウンメニューをクリックし、[詳細] を選択します。
[Customers] ノードを展開します。
この例では、いくつかのフィールドを非表示にするために、次のノードの横にあるドロップダウンメニューをクリックし、[なし] を選択します。
- NameStyle
- PasswordHash
- PasswordSalt
- rowguid
これにより、これらのノードをデザイナーにドロップしたときに Visual Studio でコントロールが作成されなくなります。このチュートリアルでは、エンドユーザーがこのデータを表示する必要はないと仮定します。
[データソース] ウィンドウから、[Customers] ノードをデザイナーのボタンの下にドラッグします。

Visual Studio により、XAML と、顧客データにバインドされる一連のコントロールを作成するコードが生成されます。

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

サービスを使用してデータを読み込み、返されたデータをコントロールにバインドされたデータソースに割り当てます。

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

デザイナーで、いずれかのボタンの横にある空の領域をクリックします。
プロパティ ウィンドウで、[UserControl] が選択されていることを確認し、[イベント] タブをクリックします。
Loaded イベントを検索し、このイベントをダブルクリックします。
表示されたコードファイル (MainPage.xaml) で、次の using ステートメント (C#) または Imports ステートメント (Visual Basic) を追加します。
```
Imports System.Windows.Data
Imports AdventureWorksSilverlightApp.AdventureWorksService
```
```
using System.Windows.Data;
using AdventureWorksSilverlightApp.AdventureWorksService;
```

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

Private advWorksService As AdventureWorksLTEntities
Private customersViewSource As CollectionViewSource

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    advWorksService = New AdventureWorksLTEntities(New Uri("https://localhost:6188/AdventureWorksDataService.svc"))
    customersViewSource = Me.Resources("CustomersViewSource")
    advWorksService.Customers.BeginExecute(Sub(result As IAsyncResult)
                                               customersViewSource.Source = advWorksService.Customers.EndExecute(result)
                                           End Sub, Nothing)
End Sub

private AdventureWorksLTEntities advWorksService;
private System.Windows.Data.CollectionViewSource customersViewSource;

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    advWorksService = new AdventureWorksLTEntities(new Uri("https://localhost:54961/AdventureWorksDataService.svc"));

    customersViewSource = this.Resources["customersViewSource"]
    as System.Windows.Data.CollectionViewSource;
    advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
}

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

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

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

[ビルド] メニューの [ソリューションのビルド] をクリックします。ソリューションがエラーなしでビルドされることを確認します。
F5 キーを押します。
Customers テーブルの最初のレコードが表示されることを確認します。
アプリケーションを閉じます。

注意

ここでエラーが表示される場合は、ASP.NET 開発サーバーの適切なポートがコードに含まれていることを確認します。

レコード間の移動

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

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

MainPage.xaml をデザイナーで開き、[<] ボタンをダブルクリックします。

生成された backButton_Click イベントハンドラーを次のコードで置き換えます。

Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click
    customersViewSource.View.MoveCurrentToPrevious()
    If customersViewSource.View.IsCurrentBeforeFirst Then
        customersViewSource.View.MoveCurrentToFirst()
    End If
End Sub

private void backButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToPrevious();
    if (customersViewSource.View.IsCurrentBeforeFirst)
        customersViewSource.View.MoveCurrentToFirst();
}

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

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

生成された nextButton_Click イベントハンドラーを次のコードで置き換えます。

Private Sub nextButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles nextButton.Click
    customersViewSource.View.MoveCurrentToNext()
    If customersViewSource.View.IsCurrentAfterLast Then
        customersViewSource.View.MoveCurrentToLast()
    End If
End Sub

private void nextButton_Click(object sender, RoutedEventArgs e)
{
    customersViewSource.View.MoveCurrentToNext();
    if (customersViewSource.View.IsCurrentAfterLast)
        customersViewSource.View.MoveCurrentToLast();
}

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

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

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

[ビルド] メニューの [ソリューションのビルド] をクリックします。ソリューションがエラーなしでビルドされることを確認します。
F5 キーを押します。
Customers テーブルの最初のレコードが表示されることを確認します。
[<] ボタンおよび [>] ボタンをクリックして、顧客レコード間を前後に移動します。
アプリケーションを閉じます。

注意

ここでエラーが表示される場合は、ASP.NET 開発サーバーの適切なポートがコードに含まれていることを確認します。

次の手順

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

変更をデータベースに保存する方法を学ぶ。詳細については、「データバインディング」を参照してください。
Silverlight アプリケーションで WCF Data Services を使用して機能を組み込む方法を学ぶ。詳細については、「ADO.NET Data Services (Silverlight)」を参照してください。

参照

その他の技術情報

Data Access and Data Structures (データアクセスとデータ構造)

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

必須コンポーネント

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

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

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

Entity Data Model を作成するには

サービスの作成

サービスを作成するには

サービスの構成

サービスを構成するには

Silverlight アプリケーションの作成

Silverlight アプリケーションを作成するには

Silverlight アプリケーションへのデータ ソースの追加

データ ソースを作成するには

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

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

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

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

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

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

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

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

レコード間の移動

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

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

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

次の手順

参照

その他の技術情報

その他のリソース

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

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

Silverlight アプリケーションへのデータソースの追加

データソースを作成するには

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

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

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

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