演练：绑定到混合应用程序中的数据

2011-08-12

更新：2010 年 8 月

无论您使用的是 Windows Forms还是 WPF，将数据源绑定到控件都是向用户提供基础数据访问所必需的。本演练演示如何在同时包括 Windows Forms和 WPF 控件的混合应用程序中使用数据绑定。

本演练涉及以下任务：

创建项目。
定义数据模板。
指定窗体布局。
指定数据绑定。
使用互操作功能来显示数据。
向项目添加数据源。
绑定到数据源。

有关本演练中所阐释任务的完整代码清单，请参见 Data Binding in Hybrid Applications Sample（混合应用程序中的数据绑定示例）。

在完成本演练后，您将对混合应用程序中的数据绑定功能有了一定了解。

系统必备

您需要以下组件来完成本演练：

Visual Studio 2010.
对 Microsoft SQL Server 上运行的 Northwind 示例数据库的访问权限。

创建项目

创建和设置项目

创建一个名为 WPFWithWFAndDatabinding 的 WPF 应用程序项目。
在解决方案资源管理器中，添加对以下程序集的引用。
- WindowsFormsIntegration
- System.Windows.Forms
在 WPF 设计器中打开 MainWindow.xaml。

在 Window 元素中，添加以下 Windows Forms命名空间映射。

xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

通过分配 Name 属性来将默认的 Grid 元素命名为 mainGrid。
```
    <Grid x:Name="mainGrid">
```

定义数据模板

客户的主列表显示在 ListBox 控件中。下面的代码示例定义一个名为 ListItemsTemplate 的 DataTemplate 对象，该对象控制 ListBox 控件的可视化树。这个 DataTemplate 分配给 ListBox 控件的 ItemTemplate 属性。

定义数据模板

将下面的 XAML 复制到 Grid 元素的声明中。

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

指定窗体布局

窗体的布局由一个包含三行和三列的网格来定义。 Label 控件旨在标识 Customers 表中的每一列。

设置网格布局

将下面的 XAML 复制到 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>

设置 Label 控件

将下面的 XAML 复制到 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>

指定数据绑定

客户的主列表显示在 ListBox 控件中。所附加的 ListItemsTemplate 将 TextBlock 控件绑定到数据库中的 ContactName 字段。

每个客户记录的详细信息都显示在多个 TextBox 控件中。

指定数据绑定

将下面的 XAML 复制到 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>

使用互操作功能来显示数据

与选定客户相对应的订单显示在一个名为 dataGridView1 的 System.Windows.Forms.DataGridView 控件中。 dataGridView1 控件绑定到代码隐藏文件中的数据源。 WindowsFormsHost 控件是这个 Windows Forms控件的父级。

在 DataGridView 控件中显示数据

将下面的 XAML 复制到 Grid 元素的声明中。

        <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 组件为应用程序的数据源提供了一个统一接口。到数据源的绑定是在代码隐藏文件中实现的。

绑定到数据源

打开名为 MainWindow.xaml.vb 或 MainWindow.xaml.cs 的代码隐藏文件。

将下面的代码复制到 MainWindow 类定义中。

此代码声明 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();

将下面的代码复制到构造函数中。

此代码创建并初始化 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 MainWindow()
{
    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;
}

打开 MainWindow.xaml。
在设计视图或 XAML 视图中，选择 Window 元素。
在“属性”窗口中，单击**“事件”**选项卡。
双击 Loaded 事件。

将下面的代码复制到 Loaded 事件处理程序中。

此代码将 BindingSource 组件作为数据上下文进行分配并填充 Customers 和 Orders 适配器对象。

Private Sub Window_Loaded( _
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 Window_Loaded(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);
}

将下面的代码复制到 MainWindow 类定义中。

此方法处理 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 生成并运行该应用程序。

请参见

修订记录

日期	修订记录	原因
2010 年 8 月	针对 Visual Studio 2010 进行了更新。	客户反馈

2010 年 8 月

针对 Visual Studio 2010 进行了更新。

客户反馈

通过

演练：绑定到混合应用程序中的数据

系统必备

创建项目

创建和设置项目

定义数据模板

定义数据模板

指定窗体布局

设置网格布局

设置 Label 控件

指定数据绑定

指定数据绑定

使用互操作功能来显示数据

在 DataGridView 控件中显示数据

向项目添加数据源

添加数据源

绑定到数据源

绑定到数据源

请参见

参考

概念

其他资源

修订记录

其他资源