通过

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

  • 项目

更新：2007 年 11 月

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

本演练涉及以下任务：

  • 创建项目。

  • 定义数据模板。

  • 指定窗体布局。

  • 指定数据绑定。

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

  • 向项目添加数据源。

  • 绑定到数据源。

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

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

说明：

显示的对话框和菜单命令可能会与“帮助”中的描述有所不同，具体取决于您现用的设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。有关更多信息，请参见 Visual Studio 设置。

先决条件

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

  • Visual Studio 2008.

  • 对 Microsoft SQL Server 上运行的 Northwind 示例数据库的访问权限。

创建项目

创建和设置项目

  1. 创建一个名为 WPFWithWFAndDatabinding 的 WPF 应用程序项目。

  2. 在解决方案资源管理器中，添加一个对名为 WindowsFormsIntegration.dll 的 WindowsFormsIntegration 程序集的引用。

  3. 在解决方案资源管理器中，添加一个对名为 System.Windows.Forms.dll 的 Windows 窗体程序集的引用。

  4. 在 WPF 设计器中打开 Window1.xaml。

  5. 在该文件的开头，用下面的代码映射 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"
    >

  6. 通过分配 Name 属性来将默认的 Grid 元素命名为 mainGrid。

    <Grid x:Name="mainGrid">

     <Grid x:Name="mainGrid">

定义数据模板

客户的主列表显示在 ListBox 控件中。下面的代码示例定义一个名为 ListItemsTemplate 的 DataTemplate 对象，该对象控制 ListBox 控件的可视化树。这个 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>

指定窗体布局

窗体的布局由一个包含三行和三列的网格来定义。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>

设置 Label 控件

  • 将下面的代码复制到 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，可以方便地向项目中添加数据源。此过程会向项目中添加一个强类型数据集，还将添加其他多个支持类（如面向每个所选表的表适配器）。

添加数据源

  1. 从“项目”菜单中选择“添加新数据源...”。

  2. 在“数据源配置向导”中单击“新建连接”以创建到 Northwind 数据库的连接。有关更多信息，请参见如何：连接到数据库中的数据。

  3. 在收到“数据源配置向导”的提示时，请将连接字符串另存为 NorthwindConnectionString。

  4. 选择 Customers 和 Orders 表，并将所生成的数据集命名为 NorthwindDataSet。

绑定到数据源

System.Windows.Forms.BindingSource 组件为应用程序的数据源提供了一个统一接口。到数据源的绑定是在代码隐藏文件中实现的。

绑定到数据源

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

  2. 将下面的代码复制到 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();

  3. 将下面的代码复制到 Window1 构造函数中紧随 InitializeComponent 方法调用之后。

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

  4. 将下面的代码复制到 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);
}

  5. 将下面的代码复制到 Window1 类定义中的 WindowLoaded 方法后面。

    此方法处理 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;
}

  6. 按 F5 生成并运行应用程序。

请参见

任务

混合应用程序中的数据绑定示例

概念

演练：在 Windows Presentation Foundation 中承载 Windows 窗体复合控件

演练：在 Windows 窗体中承载 Windows Presentation Foundation 控件

参考

ElementHost

WindowsFormsHost

其他资源

WPF 设计器

迁移和互操作性帮助主题