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

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

公開日: 2016年4月

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

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

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

注意

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

必須コンポーネント

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

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

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

データセットおよび TableAdapter。詳細については、「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"><</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 イベントハンドラー内で割り当てます。

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

    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

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

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

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

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

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

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

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

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

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

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

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

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 コントロールをバインドする
 Visual Studio でのデータセットの操作
 WPF および Silverlight デザイナーの概要
 データバインドの概要

次の方法で共有

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

必須コンポーネント

プロジェクトの作成

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

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

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

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

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

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

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

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

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

製品レコード間の移動

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

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

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

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

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

次の手順

参照

その他のリソース

次の方法で共有

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

必須コンポーネント

プロジェクトの作成

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

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

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

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

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

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

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

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

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

製品レコード間の移動

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

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

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

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

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

次の手順

参照

その他のリソース

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

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

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

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