Genomgång: Bindning till data i hybridprogram

2025-05-07

Att binda en datakälla till en kontroll är viktigt för att ge användarna åtkomst till underliggande data, oavsett om du använder Windows Forms eller WPF. Den här genomgången visar hur du kan använda databindning i hybridprogram som innehåller både Windows Forms- och WPF-kontroller.

Uppgifter som illustreras i den här genomgången är:

Skapa projektet.
Att definiera datamallen.
Ange formulärlayouten.
Ange databindningar.
Visa data med hjälp av interoperation.
Lägga till datakällan i projektet.
Bindning till datakällan.

En fullständig kodlista över de uppgifter som illustreras i den här genomgången finns i Databindning i hybridprogramexempel.

När du är klar har du en förståelse för databindningsfunktioner i hybridprogram.

Förutsättningar

Du behöver följande komponenter för att slutföra den här genomgången:

Visual Studio.
Åtkomst till Northwind-exempeldatabasen som körs på Microsoft SQL Server.

Skapa projektet

Skapa och konfigurera projektet

Skapa ett WPF-programprojekt med namnet WPFWithWFAndDatabinding.
I Solution Explorer lägger du till referenser till följande sammansättningar.
- WindowsFormsIntegration
- System.Windows.Forms
Öppna MainWindow.xaml i WPF Designer.

I elementet Window lägger du till följande Windows Forms-namnrymdsmappning.

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

Ge standardelementet namnet GridmainGrid genom att tilldela egenskapen Name.
```
<Grid x:Name="mainGrid">
```

Definiera datamallen

Huvudlistan över kunder visas i ett ListBox-kontrollelement. I följande kodexempel definieras ett DataTemplate objekt med namnet ListItemsTemplate som styr det visuella trädet i ListBox-kontrollen. Den här DataTemplate tilldelas ListBox-kontrollens egenskap ItemTemplate.

Så här definierar du datamallen

Kopiera följande XAML till Grid-elementets deklaration.

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

Ange formulärlayouten

Formulärets layout definieras av ett rutnät med tre rader och tre kolumner. Kontroller Label tillhandahålls för att identifiera varje kolumn i tabellen Kunder.

Så här konfigurerar du rutnätslayouten

Kopiera följande XAML till Grid-elementets deklaration.

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

Så här konfigurerar du etikettkontrollerna

Kopiera följande XAML till Grid-elementets deklaration.

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

Ange databindningar

Huvudlistan över kunder visas i ett ListBox-kontrollelement. Det bifogade ListItemsTemplate binder en TextBlock-kontroll till ContactName-fältet i databasen.

Information om varje kundpost visas i flera TextBox kontroller.

Ange databindningar

Kopiera följande XAML till Grid-elementets deklaration.

Klassen Binding binder TextBox-kontrollerna till lämpliga fält i databasen.

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

Visa data med hjälp av interoperation

Beställningarna som motsvarar den valda kunden visas i en System.Windows.Forms.DataGridView kontroll med namnet dataGridView1. Kontrollen dataGridView1 är bunden till datakällan i filen bakom koden. En WindowsFormsHost-kontroll är förälder till den här Windows Forms-kontrollen.

Så här visar du data i DataGridView-kontrollen

Kopiera följande XAML till Grid-elementets deklaration.

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

Lägga till datakällan i projektet

Med Visual Studio kan du enkelt lägga till en datakälla i projektet. Den här proceduren lägger till en tydligt typad datauppsättning i projektet. Flera andra stödklasser, till exempel tabelladaptrar för varje vald tabell, läggs också till.

Så här lägger du till datakällan

På menyn Data väljer du Lägg till ny datakälla.
I konfigurationsguiden för datakällaskapar du en anslutning till Northwind-databasen med hjälp av en datauppsättning. Mer information finns i Så här ansluter du till data i en databas.
När du uppmanas av datakällans konfigurationsguide , sparar du anslutningssträngen som NorthwindConnectionString.

Viktigt!

Lagring av känslig information, till exempel ett lösenord, i anslutningssträngen kan påverka programmets säkerhet. Att använda Windows-autentisering, även kallat integrerad säkerhet, är ett säkrare sätt att styra åtkomsten till en databas. Mer information finns i Skydda anslutningsinformation.
När du uppmanas att välja dina databasobjekt väljer du tabellerna Customers och Orders och namnger den genererade datauppsättningen NorthwindDataSet.

Bindning till datakällan

Komponenten System.Windows.Forms.BindingSource tillhandahåller ett enhetligt gränssnitt för programmets datakälla. Bindning till datakällan implementeras i filen bakom koden.

Så här binder du till datakällan

Öppna filen bakom koden, som heter MainWindow.xaml.vb eller MainWindow.xaml.cs.

Kopiera följande kod till MainWindow-klassdefinitionen.

Den här koden deklarerar BindingSource komponent- och associerade hjälpklasser som ansluter till databasen.

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

Kopiera följande kod till konstruktorn.

Den här koden skapar och initierar komponenten 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

Öppna MainWindow.xaml.
I designvyn eller XAML-vyn väljer du elementet Window.
I fönstret Egenskaper klickar du på fliken Händelser.
Dubbelklicka på händelsen Loaded.

Kopiera följande kod till händelsehanteraren för Loaded.

Den här koden tilldelar BindingSource komponenten som datakontext och fyller i Customers- och Orders adapterobjekt.

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

Kopiera följande kod till MainWindow-klassdefinitionen.

Den här metoden hanterar händelsen CurrentChanged och uppdaterar det aktuella objektet i databindningen.

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

Tryck på F5 för att skapa och köra programmet.

Se även

Feedback

Var den här sidan till hjälp?