チュートリアル : ハイブリッドアプリケーションでのデータへのバインディング

[アーティクル]
08/16/2008

更新 : 2007 年 11 月

データソースのコントロールへのバインディングは、Windows フォームと WPF のどちらを使用しているかに関係なく、ユーザーが基になるデータにアクセスできるようにするために不可欠です。このチュートリアルでは、Windows フォームコントロールと WPF コントロールの両方を含むハイブリッドアプリケーションでデータバインディングを使用する方法を示します。

このチュートリアルでは、以下のタスクを行います。

プロジェクトの作成。
データテンプレートの定義。
フォームレイアウトの指定。
データバインディングの指定。
相互運用を使用したデータの表示。
プロジェクトへのデータソースの追加。
データソースへのバインディング。

このチュートリアルで示すタスクの完全なコード一覧については、「ハイブリッドアプリケーションでのデータバインディングのサンプル」を参照してください。

終了すると、ハイブリッドアプリケーションのデータバインディング機能を理解できるようになります。

メモ :
使用している設定またはエディションによっては、ヘルプの記載と異なるダイアログボックスやメニューコマンドが表示される場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

使用している設定またはエディションによっては、ヘルプの記載と異なるダイアログボックスやメニューコマンドが表示される場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

前提条件

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

Visual Studio 2008.
Microsoft SQL Server で実行されている Northwind サンプルデータベースへのアクセス。

プロジェクトの作成

プロジェクトを作成し、設定するには

WPFWithWFAndDatabinding という名前の WPF アプリケーションプロジェクトを作成します。
ソリューションエクスプローラで、WindowsFormsIntegration.dll という名前の WindowsFormsIntegration アセンブリへの参照を追加します。
ソリューションエクスプローラで、System.Windows.Forms.dll という名前の Windows フォームアセンブリへの参照を追加します。
WPF デザイナで Window1.xaml を開きます。

ファイルの先頭で、Windows フォーム名前空間を次のコードでマップします。

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

<Window x:Class="WPFWithWFAndDatabinding.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

Name プロパティを割り当てて、既定の Grid 要素に mainGrid という名前を付けます。
```
<Grid x:Name="mainGrid">
```
```
 <Grid x:Name="mainGrid">
```

データテンプレートの定義

顧客のマスタ一覧が ListBox コントロールに表示されます。ListBox コントロールのビジュアルツリーを制御する ListItemsTemplate という名前の DataTemplate オブジェクトを定義するコード例を次に示します。この DataTemplate は、ListBox コントロールの ItemTemplate プロパティに割り当てられます。

データテンプレートを定義するには

次のコードを Grid 要素の宣言にコピーします。

<Grid.Resources>
  <DataTemplate x:Key="ListItemsTemplate">
    <TextBlock Text="{Binding Path=ContactName}"/>
  </DataTemplate>
</Grid.Resources>

     <Grid.Resources>
            <DataTemplate x:Key="ListItemsTemplate">
                <TextBlock Text="{Binding Path=ContactName}"/>
            </DataTemplate>
        </Grid.Resources>

フォームレイアウトの指定

フォームのレイアウトは、3 つの行と 3 つの列を持つグリッドで定義されます。Label コントロールで、Customers テーブル内の各列が識別されます。

グリッドレイアウトを設定するには

次のコードを Grid 要素の宣言にコピーします。

<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

     <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

ラベルコントロールを設定するには

次のコードを Grid 要素の宣言にコピーします。

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
  <Label Margin="20,38,5,2">First Name:</Label>
  <Label Margin="20,0,5,2">Company Name:</Label>
  <Label Margin="20,0,5,2">Phone:</Label>
  <Label Margin="20,0,5,2">Address:</Label>
  <Label Margin="20,0,5,2">City:</Label>
  <Label Margin="20,0,5,2">Region:</Label>
  <Label Margin="20,0,5,2">Postal Code:</Label>
</StackPanel>

     <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
            <Label Margin="20,38,5,2">First Name:</Label>
            <Label Margin="20,0,5,2">Company Name:</Label>
            <Label Margin="20,0,5,2">Phone:</Label>
            <Label Margin="20,0,5,2">Address:</Label>
            <Label Margin="20,0,5,2">City:</Label>
            <Label Margin="20,0,5,2">Region:</Label>
            <Label Margin="20,0,5,2">Postal Code:</Label>
        </StackPanel>

データバインディングの指定

顧客のマスタ一覧が ListBox コントロールに表示されます。結合された ListItemsTemplate によって、TextBlock コントロールがデータベースの ContactName フィールドにバインドされます。

各顧客レコードの詳細がいくつかの TextBox コントロールに表示されます。

データバインディングを指定するには

次のコードを Grid 要素の宣言にコピーします。

Binding クラスによって、TextBox コントロールがデータベースの適切なフィールドにバインドされます。

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
      <Label Margin="20,5,5,0">List of Customers:</Label>
      <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
      <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
      <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
      <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
    </StackPanel>

     <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
            <Label Margin="20,5,5,0">List of Customers:</Label>
            <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
            <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
            <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
            <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
        </StackPanel>

相互運用を使用したデータの表示

選択した顧客に対応する注文が、dataGridView1 という名前の System.Windows.Forms.DataGridView コントロールに表示されます。dataGridView1 コントロールは、分離コードファイルのデータソースにバインドされています。WindowsFormsHost コントロールは、この Windows フォームコントロールの親です。

DataGridView コントロールにデータを表示するには

次のコードを Grid 要素の宣言にコピーします。

<WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
  <wf:DataGridView x:Name="dataGridView1"/>
</WindowsFormsHost>

     <WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
            <wf:DataGridView x:Name="dataGridView1"/>
        </WindowsFormsHost>

プロジェクトへのデータソースの追加

Visual Studio を使用すると、データソースをプロジェクトに簡単に追加できます。この手順では、厳密に型指定されたデータセットをプロジェクトに追加します。選択されたテーブルごとのテーブルアダプタなどの他のサポートクラスもいくつか追加されます。

データソースを追加するには

[プロジェクト] メニューの [新しいデータソースの追加] をクリックします。
データソース構成ウィザードで、[新しい接続] をクリックして、Northwind データベースへの接続を作成します。詳細については、「方法 : データベース内のデータに接続する」を参照してください。
データソース構成ウィザードからメッセージが表示されたら、接続文字列を NorthwindConnectionString として保存します。
Customers テーブルと Orders テーブルを選択し、生成されたデータセットに NorthwindDataSet という名前を付けます。

データソースへのバインディング

System.Windows.Forms.BindingSource コンポーネントは、アプリケーションのデータソースの統一されたインターフェイスを提供します。データソースへのバインディングは、分離コードファイルで実装されます。

データソースにバインドするには

Window1.xaml.cs または Window1.xaml.vb という名前の分離コードファイルを開きます。

次のコードを Window1 クラス定義にコピーします。

このコードでは、BindingSource コンポーネントと、データベースに接続する関連付けられたヘルパクラスが宣言されます。

Private nwBindingSource As System.Windows.Forms.BindingSource
Private nwDataSet As NorthwindDataSet
Private customersTableAdapter As New NorthwindDataSetTableAdapters.CustomersTableAdapter()
Private ordersTableAdapter As New NorthwindDataSetTableAdapters.OrdersTableAdapter()

private System.Windows.Forms.BindingSource nwBindingSource;
private NorthwindDataSet nwDataSet;
private NorthwindDataSetTableAdapters.CustomersTableAdapter customersTableAdapter = 
    new NorthwindDataSetTableAdapters.CustomersTableAdapter();
private NorthwindDataSetTableAdapters.OrdersTableAdapter ordersTableAdapter = 
    new NorthwindDataSetTableAdapters.OrdersTableAdapter();

InitializeComponent メソッドの呼び出しの直後にある Window1 コンストラクタに次のコードをコピーします。

このコードでは、BindingSource コンポーネントが作成および初期化されます。

Public Sub New()
    InitializeComponent()

    ' Create a DataSet for the Customers data.
    Me.nwDataSet = New NorthwindDataSet()
    Me.nwDataSet.DataSetName = "nwDataSet"

    ' Create a BindingSource for the Customers data.
    Me.nwBindingSource = New System.Windows.Forms.BindingSource()
    Me.nwBindingSource.DataMember = "Customers"
    Me.nwBindingSource.DataSource = Me.nwDataSet

End Sub

public Window1()
{
    InitializeComponent();

    // Create a DataSet for the Customers data.
    this.nwDataSet = new NorthwindDataSet();
    this.nwDataSet.DataSetName = "nwDataSet";

    // Create a BindingSource for the Customers data.
    this.nwBindingSource = new System.Windows.Forms.BindingSource();
    this.nwBindingSource.DataMember = "Customers";
    this.nwBindingSource.DataSource = this.nwDataSet;
}

コンストラクタの後にある Window1 クラス定義に次のコードをコピーします。

このコードでは、Loaded イベントハンドラが定義されます。このハンドラによって BindingSource コンポーネントがデータコンテキストとして割り当てられ、Customers および Orders アダプタオブジェクトが設定されます。

Private Sub WindowLoaded( _
ByVal sender As Object, _
ByVal e As RoutedEventArgs)

    ' Fill the Customers table adapter with data.
    Me.customersTableAdapter.ClearBeforeFill = True
    Me.customersTableAdapter.Fill(Me.nwDataSet.Customers)

    ' Fill the Orders table adapter with data.
    Me.ordersTableAdapter.Fill(Me.nwDataSet.Orders)

    ' Assign the BindingSource to 
    ' the data context of the main grid.
    Me.mainGrid.DataContext = Me.nwBindingSource

    ' Assign the BindingSource to 
    ' the data source of the list box.
    Me.listBox1.ItemsSource = Me.nwBindingSource

    ' Because this is a master/details form, the DataGridView
    ' requires the foreign key relating the tables.
    Me.dataGridView1.DataSource = Me.nwBindingSource
    Me.dataGridView1.DataMember = "FK_Orders_Customers"

    ' Handle the currency management aspect of the data models.
    ' Attach an event handler to detect when the current item 
    ' changes via the WPF ListBox. This event handler synchronizes
    ' the list collection with the BindingSource.
    '

    Dim cv As BindingListCollectionView = _
        CollectionViewSource.GetDefaultView(Me.nwBindingSource)

    AddHandler cv.CurrentChanged, AddressOf WPF_CurrentChanged

End Sub

private void WindowLoaded(object sender, RoutedEventArgs e)
{
    // Fill the Customers table adapter with data.
    this.customersTableAdapter.ClearBeforeFill = true;
    this.customersTableAdapter.Fill(this.nwDataSet.Customers);

    // Fill the Orders table adapter with data.
    this.ordersTableAdapter.Fill(this.nwDataSet.Orders);

    // Assign the BindingSource to 
    // the data context of the main grid.
    this.mainGrid.DataContext = this.nwBindingSource;

    // Assign the BindingSource to 
    // the data source of the list box.
    this.listBox1.ItemsSource = this.nwBindingSource;

    // Because this is a master/details form, the DataGridView
    // requires the foreign key relating the tables.
    this.dataGridView1.DataSource = this.nwBindingSource;
    this.dataGridView1.DataMember = "FK_Orders_Customers";

    // Handle the currency management aspect of the data models.
    // Attach an event handler to detect when the current item 
    // changes via the WPF ListBox. This event handler synchronizes
    // the list collection with the BindingSource.
    //

    BindingListCollectionView cv = CollectionViewSource.GetDefaultView(
        this.nwBindingSource) as BindingListCollectionView;

    cv.CurrentChanged += new EventHandler(WPF_CurrentChanged);
}

WindowLoaded メソッドの後にある Window1 クラス定義に次のコードをコピーします。

このメソッドは CurrentChanged イベントを処理し、データバインディングの現在の項目を更新します。

' This event handler updates the current item 
' of the data binding.
Private Sub WPF_CurrentChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim cv As BindingListCollectionView = sender
    Me.nwBindingSource.Position = cv.CurrentPosition
End Sub

// This event handler updates the current item 
// of the data binding.
void WPF_CurrentChanged(object sender, EventArgs e)
{
    BindingListCollectionView cv = sender as BindingListCollectionView;
    this.nwBindingSource.Position = cv.CurrentPosition;
}

F5 キーを押してアプリケーションをビルドし、実行します。

参照

次の方法で共有

チュートリアル : ハイブリッドアプリケーションでのデータへのバインディング

前提条件

プロジェクトの作成

プロジェクトを作成し、設定するには

データテンプレートの定義

データテンプレートを定義するには

フォームレイアウトの指定

グリッドレイアウトを設定するには

ラベルコントロールを設定するには

データバインディングの指定

データバインディングを指定するには

相互運用を使用したデータの表示

DataGridView コントロールにデータを表示するには

プロジェクトへのデータソースの追加

データソースを追加するには

データソースへのバインディング

データソースにバインドするには

参照

処理手順

概念

参照

その他の技術情報

その他のリソース

次の方法で共有

チュートリアル : ハイブリッド アプリケーションでのデータへのバインディング

前提条件

プロジェクトの作成

プロジェクトを作成し、設定するには

データ テンプレートの定義

データ テンプレートを定義するには

フォーム レイアウトの指定

グリッド レイアウトを設定するには

ラベル コントロールを設定するには

データ バインディングの指定

データ バインディングを指定するには

相互運用を使用したデータの表示

DataGridView コントロールにデータを表示するには

プロジェクトへのデータ ソースの追加

データ ソースを追加するには

データ ソースへのバインディング

データ ソースにバインドするには

参照

処理手順

概念

参照

その他の技術情報

その他のリソース

チュートリアル : ハイブリッドアプリケーションでのデータへのバインディング

データテンプレートの定義

データテンプレートを定義するには

フォームレイアウトの指定

グリッドレイアウトを設定するには

ラベルコントロールを設定するには

データバインディングの指定

データバインディングを指定するには

プロジェクトへのデータソースの追加

データソースを追加するには

データソースへのバインディング

データソースにバインドするには