Freigeben über

Exemplarische Vorgehensweise: Datenbindung in Hybridanwendungen

  • Artikel

Aktualisiert: November 2007

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

Tipp

Die angezeigten Dialogfelder und Menübefehle können sich je nach den aktiven Einstellungen oder der verwendeten Version von den in der Hilfe beschriebenen unterscheiden. Um die Einstellungen zu ändern, klicken Sie im Menü Extras auf Einstellungen importieren und exportieren. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Vorbereitungsmaßnahmen

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

  • Visual Studio 2008.

  • 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 einen Verweis auf die WindowsFormsIntegration-Assembly mit dem Namen WindowsFormsIntegration.dll hinzu.

  3. Fügen Sie im Projektmappen-Explorer einen Verweis auf die Windows Forms-Assembly mit dem Namen System.Windows.Forms.dll hinzu.

  4. Öffnen Sie im WPF-Designer die Datei Window1.xaml.

  5. Ordnen Sie am Anfang der Datei die Windows Forms-Namespaces dem folgenden Code zu.

    <Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

    <Window x:Class="WPFWithWFAndDatabinding.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

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

    <Grid x:Name="mainGrid">

     <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 Code in die Deklaration des Grid-Elements.

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

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

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

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

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

         <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. Klicken Sie im Menü Projekt auf Neue Datenquelle hinzufügen.

  2. Klicken Sie im Assistenten zum Konfigurieren von Datenquellenauf Neue Verbindung, um zur Datenbank Northwind eine Verbindung zu erstellen. 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. Wählen Sie die Tabellen Customers und Orders aus, und nennen Sie das generierte Dataset NorthwindDataSet.

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 Code-Behind-Datei mit dem Namen Window1.xaml.cs oder Window1.xaml.vb.

  2. Kopieren Sie den folgenden Code in die Window1-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 unmittelbar nach dem Aufruf der InitializeComponent-Methode in den Window1-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 Window1()
{
    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. Kopieren Sie den folgenden Code nach dem Konstruktor in die Window1-Klassendefinition.

    In diesem Code wird der Loaded-Ereignishandler definiert, der die BindingSource-Komponente als Datenkontext zuordnet und die Customers-Adaperobjekte und die Orders-Adapterobjekte auffüllt.

    Private Sub WindowLoaded( _
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 WindowLoaded(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);
}

  5. Kopieren Sie den folgenden Code nach der WindowLoaded-Methode in die Window1-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;
}

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

Siehe auch

Aufgaben

Beispiel zur Datenbindung in Hybridanwendungen

Konzepte

Exemplarische Vorgehensweise: Hosten eines zusammengesetzten Windows Forms-Steuerelements in Windows Presentation Foundation

Exemplarische Vorgehensweise: Hosten eines Windows Presentation Foundation-Steuerelements in Windows Forms

Referenz

ElementHost

WindowsFormsHost

Weitere Ressourcen

WPF-Designer

Gewusst-wie-Themen zu Migration und Interoperabilität