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

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

このチュートリアルでは、データバインドコントロールを含む WPF アプリケーションを作成します。コントロールは、データセットにカプセル化した製品レコードにバインドします。また、製品間を参照するためのボタンの追加と、製品レコードへの変更の保存も行います。

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

WPF アプリケーションと、AdventureWorksLT サンプルデータベースのデータから生成されるデータセットを作成する。
[データソース] ウィンドウから WPF デザイナー内のウィンドウにデータテーブルをドラッグして、データバインドコントロールセットを作成する。
製品レコード間を前後に移動するためのボタンを作成する。
ユーザーが製品レコードに対して行った変更を、データテーブルおよび基になるデータソースに保存するボタンを作成する。

[!メモ]

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

必須コンポーネント

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

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

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

データセットおよび TableAdapters。詳細については、「Visual Studio でのデータセットの操作」および「TableAdapter の概要」を参照してください。
WPF デザイナーの操作。詳細については、「WPF および Silverlight デザイナーの概要」を参照してください。
WPF のデータバインディング。詳細については、「データバインディングの概要」を参照してください。

プロジェクトの作成

新しい WPF プロジェクトを作成します。このプロジェクトでは、製品レコードを表示します。

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

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

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

アプリケーションで使用するデータセットの作成

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

データセットを作成するには

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

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

データソース構成ウィザードが開きます。
[データソースの種類を選択] ページで、[データベース] を選択し、[次へ] をクリックします。
[データベースモデルの選択] ページで、[データセット] を選択し、[次へ] をクリックします。
[データ接続の選択] ページで、次のいずれかのオプションを選択します。
- AdventureWorksLT サンプルデータベースへのデータ接続がドロップダウンリストに表示されている場合は、それを選択し、[次へ] をクリックします。
  
  または
- [新しい接続] をクリックし、AdventureWorksLT データベースへの接続を作成します。
[接続文字列をアプリケーション構成ファイルに保存する] ページで、[次の名前で接続を保存する] チェックボックスをオンにし、[次へ] をクリックします。
[データベースオブジェクトの選択] ページで、[テーブル] を展開し、Product (SalesLT) テーブルを選択します。
[完了] をクリックします。

Visual Studio によって、プロジェクトに新しい AdventureWorksLTDataSet.xsd ファイルが追加されます。また、[データソース] ウィンドウに、対応する AdventureWorksLTDataSet 項目が追加されます。AdventureWorksLTDataSet.xsd ファイルには、AdventureWorksLTDataSet という名前の型指定されたデータセットと、ProductTableAdapter という名前の TableAdapter が定義されます。このチュートリアルの後半で、ProductTableAdapter を使用してデータセットにデータを読み込み、変更をデータベースに保存します。
プロジェクトをビルドします。

TableAdapter の既定の Fill メソッドの編集

データセットにデータを読み込むには、ProductTableAdapter の Fill メソッドを使用します。既定では、Fill メソッドによって、AdventureWorksLTDataSet の ProductDataTable に Product テーブルのすべてのデータ行が読み込まれます。このメソッドは、行のサブセットのみを返すように変更できます。このチュートリアルでは、写真付きの製品の行のみを返すように Fill メソッドを変更します。

写真付きの製品の行を読み込むには

ソリューションエクスプローラーで、AdventureWorksLTDataSet.xsd ファイルをダブルクリックします。

データセットデザイナーが開きます。
デザイナーで、[Fill,GetData()] クエリを右クリックし、[構成] を選択します。

TableAdapter 構成ウィザードが開きます。
[SQL ステートメントの入力] ページのテキストボックスで、SELECT ステートメントの後ろに次の WHERE 句を追加します。
```
WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
```
[完了] をクリックします。

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

WPF デザイナーで XAML を変更して、いくつかのボタンをウィンドウに追加します。これらのボタンを使用して製品レコード間をスクロールしたり、製品レコードへの変更を保存したりできるようにするコードは、このチュートリアルで後で追加します。

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

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

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

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

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

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

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

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

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

[データソース] ウィンドウで、[Product] ノードのドロップダウンメニューをクリックし、[詳細] を選択します。
[Product] ノードを展開します。
この例では、いくつかのフィールドを非表示にするために、次のノードの横にあるドロップダウンメニューをクリックし、[なし] を選択します。
- ProductCategoryID
- ProductModelID
- ThumbnailPhotoFileName
- rowguid
- ModifiedDate
[ThumbNailPhoto] ノードの横にあるドロップダウンメニューをクリックし、[イメージ] を選択します。

[!メモ]

既定では、画像を表す [データソース] ウィンドウ内の項目は、その既定のコントロールが [なし] に設定されています。これは、画像がデータベース内でバイト配列として格納されているためです。バイト配列には、単純なバイト配列から大規模なアプリケーションの実行可能ファイルまで、任意のデータを格納することができます。
[データソース] ウィンドウから、ボタンがある行の下のグリッド行に [Product] ノードをドラッグします。

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

製品レコード間の移動

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

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

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

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

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

Dim ProductViewSource As System.Windows.Data.CollectionViewSource
Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
    'Load data into the table Product. You can modify this code as needed.
    AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
    AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
    ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
    ProductViewSource.View.MoveCurrentToFirst()
End Sub

private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
private System.Windows.Data.CollectionViewSource productViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
    // Load data into the table Product. You can modify this code as needed.
    adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
    adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
    productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
    productViewSource.View.MoveCurrentToFirst();
}

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

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

if (productViewSource.View.CurrentPosition > 0)
{
    productViewSource.View.MoveCurrentToPrevious();
}

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

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

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

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

製品レコードへの変更の保存

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

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

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

Visual Studio で分離コードファイルが開き、Click イベントの新しい saveButton_Click イベントハンドラーが作成されます。
saveButton_Click イベントハンドラーに次のコードを追加します。
```
AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
```
```
adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
```
[!メモ]

この例では、TableAdapter の Save メソッドを使用して変更を保存します。このチュートリアルでは、データテーブルは 1 つしか変更されないため、この方法が適しています。複数のデータテーブルへの変更を保存する必要がある場合は、Visual Studio によってデータセットと共に生成された TableAdapterManager の、UpdateAll メソッドを使用することもできます。詳細については、「TableAdapterManager の概要」を参照してください。

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

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

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

F5 キーを押します。

アプリケーションがビルドされ、実行されます。次の点を確認します。
- テキストボックスに、写真付きの製品の先頭レコードのデータが表示されること。この製品の製品 ID は 713 で、製品名は Long-Sleeve Logo Jersey, S です。
- [>] ボタンまたは [<] ボタンをクリックして、他の製品レコードに移動できること。
いずれかの製品レコードの [Size] の値を変更し、[Save changes] をクリックします。
アプリケーションを終了し、Visual Studio で F5 キーを押してアプリケーションを再起動します。
変更した製品レコードに移動し、変更が保持されていることを確認します。
アプリケーションを閉じます。

次の手順

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

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

参照

処理手順

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

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

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

概念

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

Visual Studio でのデータセットの操作

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

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

次の方法で共有

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

必須コンポーネント

プロジェクトの作成

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

アプリケーションで使用するデータセットの作成

データセットを作成するには

TableAdapter の既定の Fill メソッドの編集

写真付きの製品の行を読み込むには

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

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

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

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

製品レコード間の移動

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

製品レコードへの変更の保存

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

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

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

次の手順

参照

処理手順

概念

その他のリソース

次の方法で共有

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

必須コンポーネント

プロジェクトの作成

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

アプリケーションで使用するデータセットの作成

データセットを作成するには

TableAdapter の既定の Fill メソッドの編集

写真付きの製品の行を読み込むには

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

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

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

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

製品レコード間の移動

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

製品レコードへの変更の保存

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

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

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

次の手順

参照

処理手順

概念

その他のリソース

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

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

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

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