Freigeben über

Anleitung: Datenbindung in hybriden Anwendungen

Das Binden einer Datenquelle an ein Steuerelement ist unerlässlich, um Benutzern Zugriff auf zugrunde liegende Daten zu gewähren, unabhängig davon, ob Sie Windows Forms oder WPF verwenden. In dieser exemplarischen Vorgehensweise wird gezeigt, wie Sie datenbindung in Hybridanwendungen verwenden können, die sowohl Windows Forms- als auch WPF-Steuerelemente enthalten.

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

  • Erstellen des Projekts.

  • Definition der Datenvorlage.

  • Angeben des Formularlayouts.

  • Angeben von Datenbindungen.

  • Anzeigen von Daten mithilfe der Interoperabilität.

  • Hinzufügen der Datenquelle zum Projekt.

  • Bindung an die Datenquelle.

Eine vollständige Codeauflistung der in dieser exemplarischen Vorgehensweise veranschaulichten Aufgaben finden Sie unter "Data Binding in Hybrid Applications Sample".

Wenn Sie fertig sind, verfügen Sie über ein Verständnis der Datenbindungsfeatures in Hybridanwendungen.

Voraussetzungen

Sie benötigen die folgenden Komponenten, um diese Schritt-für-Schritt-Anleitung abzuschließen.

  • Visual Studio.

  • Zugriff auf die Northwind-Beispieldatenbank, die auf Microsoft SQL Server ausgeführt wird.

Projekt erstellen

So erstellen und einrichten Sie das Projekt

  1. Erstellen Sie ein WPF-Anwendungsprojekt mit dem Namen WPFWithWFAndDatabinding.

  2. Fügen Sie im Solution Explorer Verweise auf die folgenden Assemblys hinzu.

    • WindowsFormsIntegration

    • System.Windows.Forms

  3. Öffnen Sie "MainWindow.xaml" im WPF-Designer.

  4. Fügen Sie im Window Element die folgende Zuordnung von Windows Forms-Namespaces hinzu.

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

  5. Benennen Sie das Standardelement GridmainGrid , indem Sie die Name Eigenschaft zuweisen.

    <Grid x:Name="mainGrid">

Definierung der Datenvorlage

Die Hauptliste der Kunden wird in einem ListBox Steuerelement angezeigt. Im folgenden Codebeispiel wird ein DataTemplate-Objekt namens ListItemsTemplate definiert, das die visuelle Struktur des ListBox-Steuerelements steuert. Dies DataTemplate wird der Eigenschaft des ListBox Steuerelements ItemTemplate zugewiesen.

So definieren Sie die Datenvorlage

  • Kopieren Sie den folgenden XAML-Code in die Grid Deklaration des 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 "Kunden" zu identifizieren.

So richten Sie das Rasterlayout ein

  • Kopieren Sie den folgenden XAML-Code in die Grid Deklaration des 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>

So richten Sie die Beschriftungselemente ein

  • Kopieren Sie den folgenden XAML-Code in die Grid Deklaration des 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 Hauptliste der Kunden wird in einem ListBox Steuerelement angezeigt. Das angefügte ListItemsTemplate Element bindet ein TextBlock Steuerelement an das ContactName Feld aus der Datenbank.

Die Details der einzelnen Kundendatensätze werden in mehreren TextBox Steuerelementen angezeigt.

Datenbindungen angeben

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

    Die Binding Klasse bindet die TextBox Steuerelemente 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 der Interoperabilität

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

So zeigen Sie Daten im DataGridView-Steuerelement an

  • Kopieren Sie den folgenden XAML-Code in die Grid Deklaration des 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 ganz einfach eine Datenquelle hinzufügen. Mit diesem Verfahren wird Ihrem Projekt ein stark typisierter Datensatz hinzugefügt. Außerdem werden mehrere andere Unterstützungsklassen wie Tabellenadapter für jede der ausgewählten Tabellen hinzugefügt.

So fügen Sie die Datenquelle hinzu

  1. Wählen Sie im Menü "Daten " die Option "Neue Datenquelle hinzufügen" aus.

  2. Erstellen Sie im Datenquellenkonfigurations-Assistenten mithilfe eines Datasets eine Verbindung mit der Northwind-Datenbank. Weitere Informationen finden Sie unter How to: Connect to Data in a Database.

  3. Wenn Sie vom Assistenten für die Datenquellenkonfiguration aufgefordert werden, speichern Sie die Verbindungszeichenfolge als NorthwindConnectionString.

    Von Bedeutung

    Das Speichern vertraulicher Informationen, z. B. eines Kennworts, innerhalb der Verbindungszeichenfolge kann sich auf die Sicherheit Ihrer Anwendung auswirken. Die Verwendung der Windows-Authentifizierung, auch als integrierte Sicherheit bezeichnet, ist eine sicherere Möglichkeit, den Zugriff auf eine Datenbank zu steuern. Weitere Informationen finden Sie unter Schützen von Verbindungsinformationen.

  4. Wenn Sie aufgefordert werden, Ihre Datenbankobjekte auszuwählen, wählen Sie die Tabellen Customers und Orders aus und benennen Sie den generierten Datensatz NorthwindDataSet.

Binden an die Datenquelle

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

Um sich mit der Datenquelle zu verbinden

  1. Öffnen Sie die CodeBehind-Datei, die MainWindow.xaml.vb oder MainWindow.xaml.cs heißt.

  2. Kopieren Sie den folgenden Code in die MainWindow Klassendefinition.

    Dieser Code deklariert die Komponente und die BindingSource zugehörigen 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()

  3. Kopieren Sie den folgenden Code in den Konstruktor.

    Dieser Code erstellt und initialisiert die BindingSource Komponente.

    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

  4. Öffnen Sie "MainWindow.xaml".

  5. Wählen Sie in der Entwurfsansicht oder XAML-Ansicht das Window Element aus.

  6. Klicken Sie im Fenster „Eigenschaften“ auf die Schaltfläche Ereignisse.

  7. Doppelklicken Sie auf das Loaded-Ereignis.

  8. Kopieren Sie den folgenden Code in den Loaded Ereignishandler.

    Dieser Code weist die BindingSource Komponente als Datenkontext zu und füllt die Customers Objekte und Orders Adapterobjekte 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

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

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

Siehe auch

  • Last updated on