Freigeben über

Binden von WPF-Steuerelementen an einen WCF-Datendienst

  • Artikel

In dieser exemplarischen Vorgehensweise erstellen Sie eine WPF-Anwendung, die datengebundene Steuerelemente enthält. Die Steuerelemente sind an Kundendatensätze gebunden, die in einem WCF-Datendienst gekapselt sind. Sie fügen außerdem die Schaltflächen hinzu, mit denen Kunden Datensätze anzeigen und ändern können.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen eines Entity Data Models, das aus Daten in der Beispieldatenbank AdventureWorksLT generiert wird.

  • Erstellen eines WCF-Datendiensts, der die Daten im Entity Data Model für eine WPF-Anwendung verfügbar macht.

  • Erstellen eines Satzes datengebundener Steuerelemente durch Ziehen von Elementen aus dem Fenster Datenquellen zum WPF-Designer.

  • Erstellen von Schaltflächen, mit denen die Navigation vorwärts und rückwärts durch die Kundendatensätze möglich ist.

  • Erstellen einer Schaltfläche, die Änderungen an Daten in den Steuerelementen im WCF-Datendienst und der zugrunde liegenden Datenquelle speichert.

Hinweis

Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in diesem Artikel. Möglicherweise verwenden Sie eine andere Edition von Visual Studio oder andere Umgebungseinstellungen. Weitere Informationen finden Sie unter Personalisieren der IDE.

Voraussetzungen

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

  • Visual Studio

  • Zugriff auf eine laufende Instanz von SQL Server oder SQL Server Express, an die eine AdventureWorksLT-Beispieldatenbank angefügt ist. Die Datenbank steht unter AdventureWorks-Beispieldatenbanken zum Download bereit.

Vorkenntnisse der folgenden Konzepte sind ebenfalls hilfreich, wenn auch für die Durchführung der exemplarischen Vorgehensweise nicht erforderlich:

So erstellen Sie das Dienstprojekt

  1. Erstellen Sie zu Beginn dieser exemplarischen Vorgehensweise ein C#- oder Visual Basic-Projekt des Typs ASP.NET-Webanwendung. Geben Sie dem Projekt den Namen AdventureWorksService.

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Default.aspx, und wählen Sie Löschen aus. Diese Datei wird für die exemplarische Vorgehensweise benötigt.

Erstellen eines Entity Data Models für den Dienst

Um die Daten mithilfe eines WCF-Datendiensts für eine Anwendung verfügbar zu machen, müssen Sie ein Datenmodell für den Dienst definieren. WCF Data Services kann zwei verschiedene Arten von Datenmodellen unterstützen: Entity Data Models und benutzerdefinierte Datenmodelle, die unter Verwendung von CLR-Objekten (Common Language Runtime) definiert werden, die die Schnittstelle IQueryable<T> implementieren. In dieser exemplarischen Vorgehensweise erstellen Sie ein Entity Data Model für das Datenmodell.

  1. Klicken Sie im Menü Projekt auf Neues Element hinzufügen.

  2. Klicken Sie in der Liste „Installierte Vorlagen“ auf Daten, und wählen Sie dann das Projektelement ADO.NET Entity Data Model aus.

  3. Ändern Sie den Namen in AdventureWorksModel.edmx, und klicken Sie auf Hinzufügen.

    Der Assistent für Entity Data Model wird geöffnet.

  4. Klicken Sie auf der Seite Modellinhalt auswählen auf Aus Datenbank generieren, und klicken Sie 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 zur Beispieldatenbank "AdventureWorksLT" verfügbar ist, wählen Sie diese aus.

    • Klicken Sie Neue Verbindung, und erstellen Sie eine Verbindung zur Datenbank AdventureWorksLT.

  6. Achten Sie darauf, dass auf der Seite Ihre Datenverbindung auswählen die Option Entitätsverbindungseinstellungen in App.Config speichern unter aktiviert ist, und wählen Sie anschließend Weiter aus.

  7. Erweitern Sie auf der Seite Datenbankobjekte auswählen den Punkt Tabellen, und wählen Sie dann die Tabelle SalesOrderHeader aus.

  8. Klicken Sie auf Fertig stellen.

Erstellen des Diensts

Erstellen Sie einen WCF-Datendienst, um die Daten im Entity Data Model für eine WPF-Anwendung verfügbar zu machen:

  1. Wählen Sie im Menü Projekt den Eintrag Neues Element hinzufügen aus.

  2. Klicken Sie in der Liste Installierte Vorlagen auf Web, und wählen Sie dann das Projektelement WCF Data Service aus.

  3. Geben Sie im Feld Name die Bezeichnung AdventureWorksService.svc ein, und klicken Sie auf OK.

    Visual Studio fügt AdventureWorksService.svc zum Projekt hinzu.

Konfigurieren des Diensts

Damit der Dienst mit dem von Ihnen erstellten Entity Data Model funktioniert, muss er konfiguriert werden.

  1. Ersetzen Sie in der Codedatei AdventureWorks.svc die Klassendeklaration AdventureWorksService durch den folgenden Code.

    public class AdventureWorksService : DataService<AdventureWorksLTEntities>
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All);
    }
}

    Dieser Code aktualisiert die Klasse AdventureWorksService, sodass sie von einer DataService<T>-Klasse abgeleitet wird, die mit der Objektkontextklasse AdventureWorksLTEntities in Ihrem Entity Data Model arbeitet. Außerdem aktualisiert er die Methode InitializeService, sodass Clients des Diensts vollen Lese-/Schreibzugriff auf die SalesOrderHeader-Entität haben.

  2. Erstellen Sie das Projekt und überprüfen Sie, ob es fehlerfrei erstellt wird.

Erstellen der WPF-Clientanwendung

Um Daten aus dem WCF-Datendienst anzuzeigen, erstellen Sie eine neue WPF-Anwendung mit einer Datenquelle, die auf dem Dienst basiert. Später in dieser exemplarischen Vorgehensweise werden Sie datengebundene Steuerelemente zur Anwendung hinzufügen.

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Lösungsknoten, dann auf Hinzufügen, und wählen Sie dann Neues Projekt aus.

  2. Erweitern Sie im Dialogfeld Neues Projekt den Punkt Visual C# oder Visual Basic, und wählen Sie dann Windows.

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

  4. Geben Sie im Feld Name die Bezeichnung AdventureWorksSalesEditor ein, und klicken Sie auf OK.

    Visual Studio fügt der Projektmappe das Projekt AdventureWorksSalesEditor hinzu.

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

    Das Fenster Datenquellen wird geöffnet.

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

    Der Assistent zum Konfigurieren von Datenquellen wird geöffnet.

  7. Wählen Sie auf der Seite Datenquellentyp auswählen des Assistenten Dienst aus, und wählen Sie anschließend Weiter aus.

  8. Klicken Sie im Dialogfeld Dienstverweis hinzufügen auf Ermitteln.

    Visual Studio durchsucht die aktuelle Projektmappe nach verfügbaren Diensten und fügt AdventureWorksService.svc zur Liste verfügbarer Dienste im Feld Dienste hinzu.

  9. Geben Sie im Feld Namespace die Zeichenfolge AdventureWorksService ein.

  10. Klicken Sie im Feld Dienste auf AdventureWorksService.svc, und wählen Sie anschließend OK aus.

    Visual Studio lädt die Dienstinformation herunter und kehrt dann zum Assistenten zum Konfigurieren von Datenquellen zurück.

  11. Klicken Sie auf der Seite Dienstverweis hinzufügen auf Fertig stellen.

    Visual Studio fügt Knoten hinzu, der die vom Dienst zurückgegebenen Daten im Fenster Datenquellen anzeigt.

Definieren der Benutzeroberfläche

Fügen Sie dem Fenster eine Reihe von Schaltflächen hinzu, indem Sie XAML im WPF-Designer ändern. Später in dieser exemplarischen Vorgehensweise fügen Sie dann Code hinzu, mit dem Anwender die Verkaufsdatensätze mithilfe dieser Schaltflächen anzeigen und ändern können.

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

    Das Fenster wird automatisch im WPF-Designer geöffnet.

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

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

  3. Erstellen Sie das Projekt.

Erstellen der datengebundenen Steuerelemente

Erstellen Sie Steuerelemente zum Anzeigen der Kundedatensätze, indem Sie den Knoten SalesOrderHeaders aus dem Fenster Datenquellen in den Designer ziehen.

  1. Klicken Sie im Fenster Datenquellen das Dropdownlistenmenü für den Knoten SalesOrderHeaders, und wählen Sie Details.

  2. Erweitern Sie den Knoten SalesOrderHeaders.

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

    • CreditCardApprovalCode

    • ModifiedDate

    • OnlineOrderFlag

    • RevisionNumber

    • Rowguid

    Durch diese Aktion wird Visual Studio daran gehindert, im nächsten Schritt datengebundene Steuerelemente für diese Knoten zu erstellen. Bei dieser exemplarischen Vorgehensweise wird davon ausgegangen, dass der Endbenutzer diese Daten nicht sehen muss.

  4. Ziehen Sie aus dem Fenster Datenquellen den Knoten SalesOrderHeaders auf das Raster unter der Zeile, in der die Schaltflächen sind.

    Visual Studio erzeugt XAML und Code, der einen Satz von Steuerelementen erstellt, die mit Daten in der Tabelle Product verbunden sind. Weitere Informationen zu den generierten XAML-Elementen und dem Code finden Sie unter Binden von WPF-Steuerelementen an Daten in Visual Studio.

  5. Klicken Sie im Designer auf das Textfeld neben der Bezeichnung Customer ID.

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

  7. Legen Sie die Eigenschaft IsReadOnly für jedes der folgenden Textfelder fest:

    • Purchase Order Number

    • Sales Order ID

    • Sales Order Number

Laden Sie die Daten aus dem Dienst

Verwenden Sie das Dienstproxyobjekt, um Verkaufsdaten aus dem Dienst zu laden. Weisen Sie dann die zurückgegebenen Daten der Datenquelle für CollectionViewSource im WPF-Fenster zu.

  1. Im Designer zum Erstellen der Window_Loaded Ereignishandler, doppelklicken Sie auf den Text, der gelesen: MainWindow.

  2. Ersetzen Sie den Ereignishandler durch den folgenden Code. Achten Sie darauf, dass Sie die Adresse localhost in diesem Code durch die lokale Hostadresse Ihres Entwicklungscomputers ersetzen.

    private AdventureWorksService.AdventureWorksLTEntities dataServiceClient;
private System.Data.Services.Client.DataServiceQuery<AdventureWorksService.SalesOrderHeader> salesQuery;
private CollectionViewSource ordersViewSource;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // TODO: Modify the port number in the following URI as required.
    dataServiceClient = new AdventureWorksService.AdventureWorksLTEntities(
        new Uri("http://localhost:45899/AdventureWorksService.svc"));
    salesQuery = dataServiceClient.SalesOrderHeaders;

    ordersViewSource = ((CollectionViewSource)(this.FindResource("salesOrderHeadersViewSource")));
    ordersViewSource.Source = salesQuery.Execute();
    ordersViewSource.View.MoveCurrentToFirst();
}

Fügen Sie Code hinzu, mit dessen Hilfe Benutzer durch die Salesdatensätze scrollen können, indem Sie die Schaltflächen < und > verwenden.

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

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

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

    if (ordersViewSource.View.CurrentPosition > 0)
    ordersViewSource.View.MoveCurrentToPrevious();

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

    Visual Studio öffnet die CodeBehind-Datei und erstellt einen neuen nextButton_Click-Ereignishandler für das Click-Ereignis.

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

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

Speichern von Änderungen an Verkaufsdatensätzen

Fügen Sie Code hinzu, mit dem Benutzer Änderungen an Sales Records sowohl anzeigen als auch mithilfe der Schaltfläche Änderungen speichern speichern können.

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

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

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

    AdventureWorksService.SalesOrderHeader currentOrder = (AdventureWorksService.SalesOrderHeader)ordersViewSource.View.CurrentItem;
dataServiceClient.UpdateObject(currentOrder);
dataServiceClient.SaveChanges();

Testen der Anwendung

Erstellen Sie die Anwendung und führen Sie sie aus; prüfen Sie, ob Sie Kundendatensätze anzeigen und ändern können:

  1. Klicken Sie im Menü Erstellen auf Projektmappe erstellen. Überprüfen Sie, ob die Lösung ohne Fehler erstellt wurde.

  2. Drücken Sie STRG+F5.

    Visual Studio startet das Projekt AdventureWorksService ohne es zu debuggen.

  3. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt AdventureWorksSalesEditor.

  4. Klicken Sie im Kontextmenü unter Debug auf Neue Instanz starten.

    Die Anwendung wird ausführt. Überprüfen Sie Folgendes:

    • Die Textfelder zeigen unterschiedliche Datenfelder aus dem ersten Verkaufsdatensatz an, der die Sales Order ID 71774 vorweist.

    • Sie können auf die Schaltflächen > oder < für die Navigation durch andere Verkaufsdatensätze klicken.

  5. Geben Sie Text in einen der Verkaufsdatensätze im Feld Kommentar ein, und wählen Sie anschließend Änderungen speichern aus.

  6. Schließen Sie die Anwendung und starten Sie sie dann erneut aus Visual Studio.

  7. Navigieren Sie zum Verkaufsdatensatz, den Sie geändert haben und überprüfen Sie, dass die Änderung nach dem Schließen und erneut Öffnen noch vorhanden ist.

  8. Schließen Sie die Anwendung.

Nächste Schritte

Nach Abschluss dieser exemplarischen Vorgehensweise können Sie folgende Aufgaben ausführen:

Zugehöriger Inhalt