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

项目
10/20/2023

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

本演练涉及以下任务：

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

有关本演练所示任务的完整代码列表，请参阅混合应用程序中的数据绑定示例。

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

先决条件

你需要满足以下条件才能完成本演练：

Visual Studio。
访问在 Microsoft SQL Server 上运行的 Northwind 示例数据库。

创建项目

创建并设置项目

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

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

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 窗体控件的父级。

在 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 数据库的连接。有关详细信息，请参阅 How to: Connect to Data in a Database。
在“数据源配置向导”提示你时，请将连接字符串另存为 NorthwindConnectionString。
当系统提示选择数据库对象时，选择 Customers 和 Orders 表，然后将生成的数据集命名为 NorthwindDataSet。

绑定到数据源

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

绑定到数据源

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

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

此代码声明连接到数据库的 BindingSource 组件和关联的帮助程序类。

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

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

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

此代码创建并初始化 BindingSource 组件。

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

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

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

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

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

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

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

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

此方法处理 CurrentChanged 事件并更新数据绑定的当前项。

// 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;
}

' 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

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

通过

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

先决条件

创建项目

创建并设置项目

定义数据模板

定义数据模板

指定窗体布局

设置网格布局

设置 Label 控件

指定数据绑定

指定数据绑定

使用互操作功能显示数据

在 DataGridView 控件中显示数据

向项目添加数据源

添加数据源

绑定到数据源

绑定到数据源

另请参阅

反馈

其他资源