チュートリアル: データセットへの WPF コントロールのバインド
このチュートリアルでは、データ バインド コントロールが含まれた WPF アプリケーションを作成します。 コントロールは、データセットでカプセル化された製品レコードにバインドされます。 また、製品を参照するためのボタンの追加と、製品レコードへの変更の保存も行います。
このチュートリアルでは、次の作業について説明します。
WPF アプリケーションと、AdventureWorksLT サンプル データベースのデータから生成されるデータセットを作成する。
[データ ソース] ウィンドウから WPF デザイナーのウィンドウにデータ テーブルをドラッグして、一連のデータ バインド コントロールを作成する。
製品レコード間を前後に移動するためのボタンを作成する。
ユーザーが製品レコードに加えた変更を、データ テーブルおよび基になるデータ ソースに保存するボタンを作成する。
注意
次の手順で参照している Visual Studio ユーザー インターフェイス要素の一部は、お使いのコンピューターでは名前や場所が異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio での開発設定のカスタマイズ」を参照してください。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
Visual Studio
AdventureWorksLT サンプル データベースが添付された、SQL Server または SQL Server Express の実行中のインスタンスへのアクセス権。 AdventureWorksLT データベースは CodePlex Web サイトからダウンロードできます。
次の概念に関する知識があると役立ちますが、チュートリアルを実行するうえで必須というわけではありません。
データセットおよび TableAdapter。 詳細については、「Visual Studio でのデータセットの操作」および「TableAdapter の概要」を参照してください。
WPF デザイナーの操作。 詳細については、「WPF Designer Overview」を参照してください。
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"><</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>
プロジェクトをビルドします。
データ バインド コントロールの作成
顧客レコードを表示するコントロールを作成するには、[データ ソース] ウィンドウから WPF デザイナーに Product テーブルをドラッグします。
データ バインド コントロールを作成するには
[データ ソース] ウィンドウで、[Product] ノードのドロップダウン メニューをクリックし、[詳細] を選択します。
[Product] ノードを展開します。
この例ではいくつかのフィールドを非表示にするために、次のノードの横のドロップダウン メニューをクリックして [なし] を選択します。
ProductCategoryID
ProductModelID
ThumbnailPhotoFileName
rowguid
ModifiedDate
[ThumbNailPhoto] ノードの横にあるドロップダウン メニューをクリックし、[イメージ] を選択します。
注意
既定では、画像を表す [データ ソース] ウィンドウ内の項目は、既定のコントロールが [なし] に設定されています。これは、画像がデータベース内でバイト配列として格納されているためです。バイト配列には、単純なバイト配列から大規模なアプリケーションの実行可能ファイルまで、あらゆるデータを格納できます。
[データ ソース] ウィンドウから、ボタンがある行の下のグリッド行に [Product] ノードをドラッグします。
Visual Studio によって、Product テーブルのデータにバインドされるコントロール セットを定義する 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(); }
製品レコードへの変更の保存
ユーザーが [変更の保存] ボタンを使用して製品レコードへの変更を保存できるようにするコードを追加します。
製品レコードへの変更を保存する機能を追加するには
デザイナーで、[変更の保存] をダブルクリックします。
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 です。
[>] または [<] をクリックして、他の製品レコードに移動できること。
いずれかの製品レコードで [サイズ] の値を変更し、[変更の保存] をクリックします。
アプリケーションを終了し、Visual Studio で F5 キーを押してアプリケーションを再起動します。
変更した製品レコードに移動し、変更が保持されていることを確認します。
アプリケーションを終了します。
次の手順
このチュートリアルを完了した後、関連する次のタスクを実行できます。
Visual Studio の [データ ソース] ウィンドウを使用して、WPF コントロールをその他の種類のデータ ソースにバインドする方法について学習します。 詳細については、「チュートリアル: WCF Data Service への WPF コントロールのバインド」を参照してください。
Visual Studio の [データ ソース] ウィンドウを使用して、WPF コントロールでの関連するデータ (つまり、親子関係にあるデータ) を表示する方法について学習します。 詳細については、「チュートリアル: WPF アプリケーションでの関連データの表示」を参照してください。
参照
処理手順
方法: Visual Studio でデータに WPF コントロールをバインドする
概念
Visual Studio でのデータへの WPF コントロールのバインド