Exemplarische Vorgehensweise: Binden von WPF-Steuerelementen an ein Dataset

In dieser exemplarischen Vorgehensweise erstellen Sie eine WPF-Anwendung, die datengebundene Steuerelemente enthält. Die Steuerelemente werden an Produktdatensätze gebunden, die in einem Dataset gekapselt sind. Sie fügen außerdem Schaltflächen hinzu, um Produkte zu durchsuchen und Änderungen an Produktdatensätzen zu speichern.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

• Erstellen einer WPF-Anwendung und eines Datasets, das aus den Daten in der Beispieldatenbank AdventureWorksLT generiert wird

• Erstellen eines Satzes datengebundener Steuerelemente durch Ziehen einer Datentabelle aus dem Datenquellenfenster in ein Fenster im WPF-Designer

• Erstellen von Schaltflächen für die Vorwärts- und Rückwärtsnavigation in Produktdatensätzen

• Erstellen einer Schaltfläche, mit der Änderungen von Benutzern an den Produktdatensätzen in der Datentabelle und der zugrunde liegenden Datenquelle gespeichert werden

  Tipp

  Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten. Die von Ihnen verwendete Visual Studio-Edition und die Einstellungen legen diese Elemente fest. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

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

• Visual Studio 2010.

• Zugriff auf eine gegenwärtig ausgeführte Instanz von SQL Server oder SQL Server Express, die mit der AdventureWorksLT-Beispieldatenbank verknüpft ist. Sie können die AdventureWorksLT-Datenbank von der CodePlex-Website herunterladen.

Vorkenntnisse in folgenden Konzepten sind außerdem hilfreich, wenn auch für die Durchführung der exemplarischen Vorgehensweise nicht erforderlich:

• DataSets und TableAdapters. Weitere Informationen finden Sie unter Arbeiten mit Datasets in Visual Studio und Übersicht über TableAdapters.

• Arbeiten mit dem WPF-Designer. Weitere Informationen finden Sie unter Übersicht über den WPF- und Silverlight-Designer.

• WPF-Datenbindung. Weitere Informationen finden Sie unter Übersicht über Datenbindung.

Erstellen des Projekts

Erstellen Sie ein neues WPF-Projekt. Das Projekt zeigt Produktdatensätze an.

So erstellen Sie das Projekt

1. Starten Sie Visual Studio.

2. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

3. Erweitern Sie Visual Basic oder Visual C#, und wählen Sie dann Windows aus.

4. Wählen Sie die Projektvorlage WPF-Anwendung aus.

5. Geben Sie im Feld Name die Bezeichnung AdventureWorksProductsEditor ein, und klicken Sie auf OK.

   Visual Studio erstellt das Projekt AdventureWorksProductsEditor.

Erstellen eines Datasets für die Anwendung

Bevor Sie datengebundene Steuerelemente erstellen können, müssen Sie ein Datenmodell für die Anwendung definieren und es dem Datenquellenfenster hinzufügen. In dieser exemplarischen Vorgehensweise erstellen Sie ein Dataset, das als Datenmodell verwendet werden soll.

So erstellen Sie ein Dataset

1. Klicken Sie im Menü Daten auf Datenquellen anzeigen.

   Das Fenster Datenquellen wird geöffnet.

2. Klicken Sie im Datenquellenfenster auf Neue Datenquelle hinzufügen.

   Der Assistent zum Konfigurieren von Datenquellen wird geöffnet.

3. Wählen Sie auf der Seite Datenquellentyp auswählen die Option Datenbank aus, und klicken Sie dann auf Weiter.

4. Wählen Sie auf der Seite Wählen Sie ein Datenbankmodell aus die Option DataSet aus, und klicken Sie dann auf Weiter.

5. Wählen Sie auf der Seite Wählen Sie Ihre Datenverbindung aus eine der folgenden Optionen aus:

   • Wenn in der Dropdownliste eine Datenverbindung mit der Beispieldatenbank AdventureWorksLT verfügbar ist, wählen Sie sie aus, und klicken Sie dann auf Weiter.

     – oder –

   • Klicken Sie auf Neue Verbindung, und erstellen Sie eine Verbindung mit der AdventureWorksLT-Datenbank.

6. Aktivieren Sie auf der Seite Verbindungszeichenfolge in der Anwendungskonfigurationsdatei speichern das Kontrollkästchen Ja, Verbindung speichern unter, und klicken Sie dann auf Weiter.

7. Erweitern Sie auf der Seite Datenbankobjekte auswählen den Knoten Tabellen, und wählen Sie dann die Tabelle Product (SalesLT) aus.

8. Klicken Sie auf Fertig stellen.

   Visual Studio fügt dem Projekt die neue Datei AdventureWorksLTDataSet.xsd und dem Datenquellenfenster das entsprechende Element AdventureWorksLTDataSet hinzu. Die Datei AdventureWorksLTDataSet.xsd definiert ein typisiertes Dataset mit dem Namen AdventureWorksLTDataSet und einen TableAdapter mit dem Namen ProductTableAdapter. Später in dieser exemplarischen Vorgehensweise verwenden Sie den ProductTableAdapter, um das Dataset mit Daten zu füllen und Änderungen in der Datenbank zu speichern.

9. Erstellen Sie das Projekt.

Bearbeiten der standardmäßigen Fill-Methode des TableAdapter

Um das Dataset mit Daten zu füllen, verwenden Sie die Fill-Methode des ProductTableAdapter. Standardmäßig füllt die Fill-Methode die ProductDataTable im AdventureWorksLTDataSet mit allen Datenzeilen aus der Tabelle Product. Sie können diese Methode ändern, sodass sie nur eine Teilmenge der Zeilen zurückgibt. Ändern Sie für diese exemplarische Vorgehensweise die Fill-Methode, sodass sie nur Zeilen für Produkte zurückgibt, die über Fotos verfügen.

So laden Sie Produktzeilen, die über Fotos verfügen

1. Doppelklicken Sie im Projektmappen-Explorer auf die Datei AdventureWorksLTDataSet.xsd.

   Der DataSet-Designer wird geöffnet.

2. Klicken Sie im Designer mit der rechten Maustaste auf die Abfrage Fill,GetData(), und wählen Sie Konfigurieren aus.

   Der TableAdapter-Konfigurations-Assistent wird geöffnet.

3. Fügen Sie auf der Seite SQL-Anweisung eingeben nach der SELECT-Anweisung im Textfeld die folgende WHERE-Klausel hinzu.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Klicken Sie auf Fertig stellen.

Definieren der Benutzeroberfläche

Fügen Sie dem Fenster mehrere Schaltflächen hinzu, indem Sie das XAML im WPF-Designer ändern. Später in dieser exemplarischen Vorgehensweise fügen Sie Code hinzu, der es Benutzern ermöglicht, mit diesen Schaltflächen in den Produktdatensätzen zu navigieren und Änderungen an diesen zu speichern.

So definieren Sie die Benutzeroberfläche des Fensters

1. Doppelklicken Sie im Projektmappen-Explorer auf MainWindow.xaml.

   Das Fenster wird im WPF-Designer geöffnet.

2. Fügen Sie in der XAML-Ansicht des Designers zwischen den <Grid>-Tags folgenden Code hinzu:

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="625" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. Erstellen Sie das Projekt.

Erstellen datengebundener Steuerelemente

Erstellen Sie Steuerelemente, die Kundendatensätze anzeigen, indem Sie die Tabelle Product aus dem Datenquellenfenster in den WPF-Designer ziehen.

So erstellen Sie datengebundene Steuerelemente

1. Klicken Sie im Datenquellenfenster auf das Dropdownmenü für den Knoten Product, und wählen Sie Details aus.

2. Erweitern Sie den Knoten Product.

3. In diesem Beispiel werden einige Felder nicht angezeigt. Klicken Sie daher auf das Dropdownmenü neben den folgenden Knoten, und wählen Sie Keine aus:

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Klicken Sie auf das Dropdownmenü neben dem Knoten ThumbNailPhoto, und wählen Sie Bild aus.

   Tipp

   Das Standardsteuerelement von Elementen im Datenquellenfenster, die Bilder darstellen, ist standardmäßig auf Keine festgelegt. Der Grund hierfür ist, dass Bilder als Bytearrays in Datenbanken gespeichert werden, und Bytearrays können äußerst unterschiedliche Elemente enthalten, von einem einfachen Bytearray bis zu einer ausführbaren Datei einer großen Anwendung.

5. Ziehen Sie den Knoten Product aus dem Datenquellenfenster in die Rasterzeile unter der Zeile, die die Schaltflächen enthält.

   Visual Studio generiert XAML, das einen Satz von Steuerelementen definiert, die an Daten in der Tabelle Products gebunden werden. Es wird außerdem Code zum Laden der Daten generiert. Weitere Informationen zum generierten XAML und Code finden Sie unter Binden von WPF-Steuerelementen an Daten in Visual Studio.

6. Klicken Sie im Designer auf das Textfeld neben der Bezeichnung Product ID.

7. Aktivieren Sie im Fenster Eigenschaften das Kontrollkästchen neben der IsReadOnly-Eigenschaft.

Navigieren in Produktdatensätzen

Fügen Sie Code hinzu, der es Benutzern ermöglicht, mit den Schaltflächen < und > in Produktdatensätzen zu navigieren.

So ermöglichen Sie es Benutzern, in Produktdatensätzen zu navigieren

1. Doppelklicken Sie im Designer auf die Schaltfläche < auf der Fensteroberfläche.

   Visual Studio öffnet die Code-Behind-Datei und erstellt einen neuen backButton_Click-Ereignishandler für das Click-Ereignis.

2. Ändern Sie den Window_Loaded-Ereignishandler, damit sich die ProductViewSource, das AdventureWorksLTDataSet und der AdventureWorksLTDataSetProductTableAdapter außerhalb der Methode befinden und das gesamte Formular auf sie zugreifen kann. Deklarieren Sie nur diese als für das Formular global, und weisen Sie sie im Window_Loaded-Ereignishandler wie folgt zu:

   Dim ProductViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
   Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
       'Load data into the table Product. You can modify this code as needed.
       AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
       AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
       ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
       ProductViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

3. Fügen Sie dem backButton_Click-Ereignishandler folgenden Code hinzu:

   If ProductViewSource.View.CurrentPosition > 0 Then
       ProductViewSource.View.MoveCurrentToPrevious()
   End If
   

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

4. Kehren Sie zum Designer zurück, und doppelklicken Sie auf die Schaltfläche >.

5. Fügen Sie dem nextButton_Click-Ereignishandler folgenden Code hinzu:

   If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
       ProductViewSource.View.MoveCurrentToNext()
   End If
   

   if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
   {
       productViewSource.View.MoveCurrentToNext();
   }
   

Speichern von Änderungen an Produktdatensätzen

Fügen Sie Code hinzu, der es Benutzern ermöglicht, Änderungen an Produktdatensätzen mit der Schaltfläche Änderungen speichern zu speichern.

So fügen Sie die Fähigkeit hinzu, Änderungen an Produktdatensätzen zu speichern

1. Doppelklicken Sie im Designer auf die Schaltfläche Änderungen speichern.

   Visual Studio öffnet die Code-Behind-Datei und erstellt einen neuen saveButton_Click-Ereignishandler für das Click-Ereignis.

2. Fügen Sie dem saveButton_Click-Ereignishandler folgenden Code hinzu:

   AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Tipp

   In diesem Beispiel wird die Save-Methode des TableAdapter verwendet, um die Änderungen zu speichern. Dies ist in dieser exemplarischen Vorgehensweise sinnvoll, da nur eine Datentabelle geändert wird. Wenn Sie Änderungen an mehreren Datentabellen speichern müssen, können Sie stattdessen die UpdateAll-Methode des TableAdapterManager verwenden, der von Visual Studio mit dem Dataset generiert wird. Weitere Informationen finden Sie unter Übersicht über TableAdapterManager.

Testen der Anwendung

Erstellen Sie die Anwendung, und führen Sie sie aus. Überprüfen Sie, ob Sie Produktdatensätze anzeigen und aktualisieren können.

So testen Sie die Anwendung

1. Drücken Sie F5.

   Die Anwendung wird erstellt und ausgeführt. Überprüfen Sie Folgendes:

   • Die Textfelder zeigen Daten aus dem ersten Produktdatensatz an, der über ein Foto verfügt. Dieses Produkt weist die Produkt-ID 713 und den Namen Long-Sleeve Logo Jersey, S auf.

   • Sie können auf die Schaltfläche > oder < klicken, um in anderen Produktdatensätzen zu navigieren.

2. Ändern Sie in einem der Produktdatensätze den Size-Wert, und klicken Sie dann auf Änderungen speichern.

3. Schließen Sie die Anwendung, und starten Sie dann die Anwendung neu, indem Sie in Visual Studio F5 drücken.

4. Navigieren Sie zu dem Produktdatensatz, den Sie geändert haben, und überprüfen Sie, ob die Änderung beibehalten wurde.

5. Schließen Sie die Anwendung.

Nächste Schritte

Nach Abschluss der exemplarischen Vorgehensweise sind Sie in der Lage, die folgenden zugehörigen Aufgaben auszuführen:

• Erlernen, wie Sie mit dem Datenquellenfenster in Visual Studio WPF-Steuerelemente an andere Typen von Datenquellen binden können. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Binden von WPF-Steuerelementen an einen WCF-Datendienst und Exemplarische Vorgehensweise: Binden von WPF-Steuerelementen an ein Entity Data Model.

• Erlernen, wie Sie mit dem Datenquellenfenster in Visual Studio zugehörige Daten (d. h. Daten in Beziehungen zwischen übergeordneten und untergeordneten Elementen) in WPF-Steuerelementen anzeigen können. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anzeigen verknüpfter Daten in einer WPF-Anwendung.

Siehe auch

Aufgaben

Gewusst wie: Binden von WPF-Steuerelementen an Daten in Visual Studio

Exemplarische Vorgehensweise: Binden von WPF-Steuerelementen an ein Entity Data Model

Exemplarische Vorgehensweise: Binden von WPF-Steuerelementen an einen WCF-Datendienst

Konzepte

Binden von WPF-Steuerelementen an Daten in Visual Studio

Arbeiten mit Datasets in Visual Studio

Übersicht über den WPF- und Silverlight-Designer

Übersicht über Datenbindung