Exemplarische Vorgehensweise: Datenbindung in Hybridanwendungen

Aktualisiert: August 2010

Die Bindung einer Datenquelle an ein Steuerelement ist äußerst wichtig, um Benutzern den Zugriff auf zugrunde liegende Daten zu ermöglichen, unabhängig davon, ob Sie Windows Forms oder WPF verwenden. In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie Datenbindung in Hybridanwendungen verwenden können, die sowohl Windows Forms-Steuerelemente als auch WPF-Steuerelemente enthalten.

Zu den in dieser exemplarischen Vorgehensweise erläuterten Aufgaben gehören:

• Erstellen des Projekts.

• Definieren der Datenvorlage.

• Angeben des Formularlayouts.

• Angeben von Datenbindungen.

• Anzeigen von Daten durch Verwenden von Interoperation.

• Hinzufügen der Datenquelle zum Projekt.

• Binden an die Datenquelle.

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

Anschließend werden Sie verstehen, welche Rolle Datenbindungsfeatures in Hybridanwendungen spielen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

• Visual Studio 2010.

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

Erstellen des Projekts

So erstellen Sie das Projekt und richten es ein

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

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

   • WindowsFormsIntegration

   • System.Windows.Forms

3. Öffnen Sie im WPF-Designer die Datei MainWindow.xaml.

4. Fügen Sie im Window-Element die folgende Windows Forms-Namespacezuordnung hinzu.

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

5. Nennen Sie das Grid-Standardelement mainGrid, indem Sie die Name-Eigenschaft zuweisen.

       <Grid x:Name="mainGrid">
   

Definieren der Datenvorlage

Die Masterliste der Kunden 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.

So definieren Sie die 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 von einem Raster mit drei Zeilen und drei Spalten definiert. Es werden Label-Steuerelemente bereitgestellt, um jede Spalte in der Kundentabelle zu identifizieren.

So richten Sie das Rasterlayout ein

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

So richten Sie die Label-Steuerelemente ein

• 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 Kunden wird in einem ListBox-Steuerelement angezeigt. Die angefügte ListItemsTemplate bindet ein TextBlock-Steuerelement an das ContactName-Feld der Datenbank.

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

So geben Sie Datenbindungen an

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

Die Aufträge, die dem ausgewählten Kunden entsprechen, werden in einem System.Windows.Forms.DataGridView-Steuerelement mit dem Namen dataGridView1 angezeigt. Das dataGridView1-Steuerelement wird an die Datenquelle in der Code-Behind-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 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 dem Projekt einfach eine Datenquelle hinzufügen. Durch diesen Vorgang wird dem Projekt ein Dataset mit strikter Typbindung hinzugefügt. Mehrere andere Unterstützungsklassen, z. B. Tabellenadapter für jede der ausgewählten Tabellen, werden ebenfalls 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 Assistenten zum Konfigurieren von Datenquellen mithilfe eines Dataset eine Verbindung mit der Northwind-Datenbank. Weitere Informationen finden Sie unter Gewusst wie: Herstellen einer Verbindung zu Daten in einer Datenbank.

3. Wenn Sie vom Assistenten zum Konfigurieren von Datenquellen dazu aufgefordert werden, speichern Sie die Verbindungszeichenfolge als NorthwindConnectionString.

4. Wenn Sie zur Auswahl der Datenbankobjekte aufgefordert werden, wählen Sie die Tabellen Orders und Customers aus, und geben Sie für das generierte Dataset den Namen NorthwindDataSet ein.

Binden an die Datenquelle

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

So binden Sie an die Datenquelle

1. Öffnen Sie die CodeBehind-Datei mit dem Namen "MainWindow.xaml.vb" oder "MainWindow.xaml.cs".

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

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

   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. Kopieren Sie den folgenden Code in den Konstruktor.

   Durch diesen Code wird die BindingSource-Komponente erstellt und initialisiert.

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

4. Öffnen Sie MainWindow.xaml.

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

6. Klicken Sie im Eigenschaftenfenster auf die Registerkarte Ereignisse.

7. Doppelklicken Sie auf das Loaded-Ereignis.

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

   Durch diesen Code wird die BindingSource-Komponente als Datenkontext zugewiesen, und die Customers- und Orders-Adapterobjekte werden aufgefüllt.

   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
   

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

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

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

Siehe auch

Referenz

ElementHost

WindowsFormsHost

Konzepte

Exemplarische Vorgehensweise: Hosten eines zusammengesetzten Windows Forms-Steuerelements in WPF

Exemplarische Vorgehensweise: Hosten eines zusammengesetzten WPF-Steuerelements in Windows Forms

Weitere Ressourcen

WPF-Designer

Beispiel zur Datenbindung in Hybridanwendungen

Änderungsprotokoll