Exemplarische Vorgehensweise: Datenbindung in Hybridanwendungen

Artikel
05/04/2023

Die Bindung einer Datenquelle an ein Steuerelement ist von großer Bedeutung, um Benutzer*innen den Zugriff auf die zugrunde liegenden Daten zu ermöglichen, unabhängig davon, ob Sie sind Windows Forms oder WPF verwenden. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie Datenbindungen in Hybridanwendungen verwenden, die sowohl Windows Forms- als auch WPF-Steuerelemente enthalten.

In dieser exemplarischen Vorgehensweise werden u. a. folgende Aufgaben veranschaulicht:

Erstellen des Projekts
Definieren der Datenvorlage.
Angeben des Formularlayouts.
Angeben von Datenbindungen.
Anzeigen von Daten mithilfe von Interoperation.
Hinzufügen der Datenquelle zum Projekt.
Bindung an die Datenquelle.

Eine vollständige Codeliste der in dieser exemplarischen Vorgehensweise dargestellten Aufgaben finden Sie unter Beispiel zur Datenbindung in Hybridanwendungen.

Anschließend werden Sie verstehen, welche Rolle Datenbindungsfunktionen bei Hybridanwendungen spielen.

Voraussetzungen

Zum Abschließen dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

Visual Studio.
Zugriff auf die Northwind-Beispieldatenbank, die unter Microsoft SQL Server ausgeführt wird.

Erstellen des Projekts

So erstellen und richten Sie das Projekt ein

Erstellen Sie ein WPF-Anwendungsprojekt mit dem Namen WPFWithWFAndDatabinding.
Fügen Sie im Projektmappen-Explorer die Verweise auf die folgenden Assemblys hinzu.
- WindowsFormsIntegration
- System.Windows.Forms
Öffnen Sie „MainWindow.xaml“ im WPF-Designer.
Fügen Sie im Window-Element die folgende Windows Forms-Namespacezuordnung hinzu.
```
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
```
Benennen Sie das Standardelement Grid mitmainGrid, indem Sie die Name-Eigenschaft zuweisen.
```
<Grid x:Name="mainGrid">
```

Definieren der Datenvorlage

Die Masterliste der Kundschaft wird in einem ListBox-Steuerelement angezeigt. Im folgenden Codebeispiel wird ein DataTemplate-Objekt mit dem Namen ListItemsTemplate definiert, das die visuelle Struktur des ListBox-Steuerelements steuert. Diese DataTemplate wird der ItemTemplate-Eigenschaft des ListBox-Steuerelements zugewiesen.

Definieren der Datenvorlage

Kopieren Sie den folgenden XAML-Code in die Deklaration des Grid-Elements.

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

Angeben des Formularlayouts

Das Layout des Formulars wird durch ein Raster mit drei Zeilen und drei Spalten definiert. Label-Steuerelemente werden bereitgestellt, um jede Spalte in der Tabelle „Customers“ zu identifizieren.

Einrichten des Rasterlayouts

Kopieren Sie den folgenden XAML-Code in die Deklaration des Grid-Elements.

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

Kopieren Sie den folgenden XAML-Code in die Deklaration des Grid-Elements.

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

Angeben von Datenbindungen

Die Masterliste der Kundschaft wird in einem ListBox-Steuerelement angezeigt. Die angefügte ListItemsTemplate bindet ein TextBlock-Steuerelement an das ContactName-Feld in der Datenbank.

Die Details für jeden Kundendatensatz werden in mehreren TextBox-Steuerelementen angezeigt.

Datenbindungen angeben

Kopieren Sie den folgenden XAML-Code in die Deklaration des Grid-Elements.

Die Binding-Klasse bindet ein TextBox-Steuerelement an die entsprechenden Felder in der Datenbank.

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

Anzeigen von Daten mithilfe von Interoperation

Die Bestellungen des ausgewählten Kunden werden in einem System.Windows.Forms.DataGridView-Steuerelement mit dem Namen dataGridView1 angezeigt. Das dataGridView1-Steuerelement wird an die Datenquelle in der CodeBehind-Datei gebunden. Ein WindowsFormsHost-Steuerelement ist das übergeordnete Element dieses Windows Forms-Steuerelements.

Anzeigen von Daten im DataGridView-Steuerelement

Kopieren Sie den folgenden XAML-Code in die Deklaration des Grid-Elements.

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

Hinzufügen der Datenquelle zum Projekt

Mit Visual Studio können Sie Ihrem Projekt problemlos eine Datenquelle hinzufügen. Bei diesem Vorgang wird dem Projekt ein stark typisiertes Dataset hinzugefügt. Mehrere andere Unterstützungsklassen, wie z.B. Tabellenadapter für jede der ausgewählten Tabellen, werden ebenfalls hinzugefügt.

So fügen Sie die Datenquelle hinzu

Wählen Sie im Menü Daten die Option Neue Datenquelle hinzufügen aus.
Erstellen Sie im Assistenten zum Konfigurieren von Datenquellen mithilfe eines Datasets eine Verbindung mit der Northwind-Datenbank. Weitere Informationen finden Sie unter How to: Connect to Data in a Database.
Speichern Sie die Verbindungszeichenfolge als NorthwindConnectionString, wenn Sie vom Assistent zum Konfigurieren von Datenquellen dazu aufgefordert werden.
Wenn Sie aufgefordert werden, Ihre Datenbankobjekte auszuwählen, wählen Sie die Tabellen Customers und Orders aus, und geben Sie dem generierten Dataset den Namen NorthwindDataSet.

Bindung an die Datenquelle

Die System.Windows.Forms.BindingSource-Komponente bietet eine einheitliche Schnittstelle für die Anwendungsdatenquelle. Die Bindung an die Datenquelle wird in der CodeBehind-Datei implementiert.

Bindung an die Datenquelle

Öffnen Sie die CodeBehind-Datei mit die Namen „MainWindow.Xaml.vb“ bzw. „MainWindow.Xaml.cs“.

Kopieren Sie den folgenden Code in die MainWindow-Klassendefinition.

Dieser Code deklariert die BindingSource-Komponente und zugeordnete Hilfsklassen, die eine Verbindung mit der Datenbank herstellen.

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

Kopieren Sie den folgenden Code in den Konstruktor.

Mit diesem Code wird die BindingSource-Komponente erstellt und initialisiert.

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

Öffnen Sie „MainWindow.xaml“.
Wählen Sie in der Designansicht oder der XAML-Ansicht das Window-Element aus.
Klicken Sie im Fenster „Eigenschaften“ auf die Schaltfläche Ereignisse.
Doppelklicken Sie auf das Loaded-Ereignis.

Kopieren Sie den folgenden Code in den Loaded-Ereignishandler.

Dieser Code weist die BindingSource-Komponente als Datenkontext zu und füllt die Adapterobjekte Customers und Orders auf.

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

Kopieren Sie den folgenden Code in die MainWindow-Klassendefinition.

Diese Methode behandelt das CurrentChanged-Ereignis und aktualisiert das aktuelle Element der Datenbindung.

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

Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

Weitere Informationen

Feedback

Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.

Feedback senden und anzeigen für

Dieses Produkt Diese Seite

Feedback zu allen Seiten anzeigen