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

このチュートリアルでは、データ バインド コントロールを含む WPF アプリケーションを作成します。 コントロールは、エンティティ データ モデルでカプセル化された顧客レコードにバインドします。 また、顧客レコード間の移動に使用できるボタンの追加と、レコードに対する変更の保存も行います。

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

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

• [データ ソース] ウィンドウからエンティティを WPF デザイナー内のウィンドウにドラッグして、データ バインド コントロール セットを作成する。

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

• コントロールへの変更を、エンティティ データ モデルおよび基になるデータ ソースに保存するボタンを作成する。

  注意

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

必須コンポーネント

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

• Visual Studio 2010.

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

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

• Entity Data Model および ADO.NET Entity Framework。 詳細については、「Entity Data Model」および「Introducing the Entity Framework」を参照してください。

• WPF デザイナーの操作。 詳細については、「WPF および Silverlight デザイナーの概要」を参照してください。

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

プロジェクトの作成

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

プロジェクトを作成するには

1. Visual Studio を起動します。

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

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

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

5. [プロジェクト名] ボックスに「AdventureWorksCustomerEditor」と入力し、[OK] をクリックします。

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

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

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

Entity Data Model を作成するには

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

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

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

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

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

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

     または

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

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

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

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

   デザイナーで Model1.edmx ファイルが開きます。

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

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

ウィンドウにボタンを追加するには、WPF デザイナーで XAML を変更します。

ウィンドウのユーザー インターフェイスを定義するには

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

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

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

   <Grid.RowDefinitions>
        <RowDefinition Height="75" />
        <RowDefinition Height="425" />
   </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>
   

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

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

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

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

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

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

3. [Customers] ノードを展開します。

4. この例では、いくつかのフィールドを非表示にするために、次のノードの横にあるドロップダウン メニューをクリックし、[なし] を選択します。

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowGuid

   • ModifiedDate

5. [データ ソース] ウィンドウから、ボタンの下の領域に [Customers] ノードをドラッグします。

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

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

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

顧客レコード間の移動

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

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

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

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

2. Window_Loaded イベント ハンドラーを変更して、CustomersViewSource および AdventureWorksLTEntities がメソッドの外部で宣言され、フォーム全体からアクセスできるようにします。 次に示すように、これらはフォームに対してのみグローバルに宣言し、Window_Loaded イベント ハンドラー内で割り当てます。

   Dim CustomersViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTEntities As AdventureWorksCustomerEditor.AdventureWorksLTEntities
   
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       CustomersViewSource = CType(Me.FindResource("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
       AdventureWorksLTEntities = New AdventureWorksCustomerEditor.AdventureWorksLTEntities()
       'Load data into Customers. You can modify this code as needed.
       Dim CustomersQuery As System.Data.Objects.ObjectQuery(Of AdventureWorksCustomerEditor.Customer) = Me.GetCustomersQuery(AdventureWorksLTEntities)
       CustomersViewSource.Source = CustomersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly)
   End Sub
   

   private System.Windows.Data.CollectionViewSource customersViewSource;
   private AdventureWorksCustomerEditor.AdventureWorksLTEntities adventureWorksLTEntities;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       adventureWorksLTEntities = new AdventureWorksCustomerEditor.AdventureWorksLTEntities();
       // Load data into Customers. You can modify this code as needed.
       customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource")));
       System.Data.Objects.ObjectQuery<AdventureWorksCustomerEditor.Customer> customersQuery = this.GetCustomersQuery(adventureWorksLTEntities);
       customersViewSource.Source = customersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly);
   }
   

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

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

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

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

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

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

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

   if (customersViewSource.View.CurrentPosition < ((CollectionView)customersViewSource.View).Count - 1)
       customersViewSource.View.MoveCurrentToNext();
   

チェックポイント

プロジェクトをビルドして実行し、コードがコンパイルされていること、および顧客レコード間を移動できることを確認します。

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

• F5 キーを押します。

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

  • 顧客データが表示されること。

  • [>] ボタンまたは [<] ボタンをクリックして、顧客レコード間を移動できること。

顧客レコードへの変更の保存

ユーザーが [Save changes] ボタンを使用して、顧客レコードへの変更を保存できるようにするコードを追加します。

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

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

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

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

   AdventureWorksLTEntities.SaveChanges()
   

   adventureWorksLTEntities.SaveChanges();
   

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

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

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

1. F5 キーを押します。

2. いずれかの顧客レコードを編集し、[Save changes] をクリックします。

3. アプリケーションを終了し、F5 キーを押してアプリケーションを再起動します。

4. 変更した顧客レコードに移動し、変更が保持されていることを確認します。

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

次の手順

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

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

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

参照

処理手順

方法: Visual Studio でデータに WPF コントロールをバインドする

チュートリアル: データセットへの WPF コントロールのバインド

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

概念

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

WPF および Silverlight デザイナーの概要

データ バインディングの概要

その他の技術情報

Entity Data Model

Introducing the Entity Framework