Procédure pas à pas : liaisons de contrôles WPF à un service de données WCF

Article
02/15/2017

Date de publication : mars 2016

Dans cette procédure pas à pas, vous allez créer une application WPF qui contient des contrôles liés aux données. Les contrôles sont liés aux enregistrements client encapsulés dans un Service de données WCF. Vous allez aussi ajouter des boutons utilisables par les clients pour afficher et mettre à jour des enregistrements.

Cette procédure pas à pas décrit les tâches suivantes :

Création d'un Entity Data Model généré à partir des données de l'exemple de base de données AdventureWorksLT.
Création d'un Service de données WCF exposant les données de l'Entity Data Model à une application WPF.
Création d'un ensemble de contrôles liés aux données en faisant glisser des éléments depuis la fenêtre Sources de données vers le Concepteur WPF.
Création de boutons permettant d'avancer et de reculer dans les enregistrements client.
Création d'un bouton permettant d'enregistrer les modifications des données dans les contrôles du Service de données WCF et la source de données sous-jacente.

Notes

Il est possible que pour certains des éléments de l'interface utilisateur de Visual Studio, votre ordinateur affiche des noms ou des emplacements différents de ceux indiqués dans les instructions suivantes. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d'informations, consultez Personnalisation de l'IDE.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio
Accès à une instance en cours d'exécution de SQL Server ou SQL Server Express à laquelle est attaché l'exemple de base de données AdventureWorksLT. Vous pouvez télécharger la base de données AdventureWorksLT à partir du site web CodePlex.

La connaissance préalable des concepts suivants s'avère également utile, mais n'est pas obligatoire pour suivre cette procédure pas à pas :

Services de données WCF. Pour plus d'informations, consultez Vue d'ensemble.
Modèles de données dans les Services de données WCF.
Entity Data Models et ADO.NET Entity Framework. Pour plus d'informations, consultez Vue d'ensemble d'Entity Framework.
Utilisation du Concepteur WPF. Pour plus d'informations, consultez Vue d'ensemble des concepteurs WPF et Silverlight.
Liaison de données WPF. Pour plus d'informations, consultez Vue d'ensemble de la liaison de données.

Création du projet de service

Commencez cette procédure pas à pas par la création d'un projet pour un Service de données WCF.

Pour créer le projet de service

Démarrez Visual Studio.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Développez Visual C# ou Visual Basic et choisissez Web.
Sélectionnez le modèle de projet Application web ASP.NET.
Dans la zone Nom, tapez AdventureWorksService, puis cliquez sur OK.

Visual Studio crée le projet AdventureWorksService.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx et sélectionnez Supprimer. Ce fichier n'est pas nécessaire dans cette procédure pas à pas.

Création d'un Entity Data Model pour le service

Pour exposer les données à une application à l'aide d'un Service de données WCF, vous devez définir un modèle de données pour le service. Le Service de données WCF prend en charge deux types de modèles de données : Entity Data Model et les modèles de données personnalisés définis à l'aide des objets CLR (Common Language Runtime) qui implémentent l'interface IQueryable<T>. Dans cette procédure pas à pas, vous allez créer un Entity Data Model comme modèle de données.

Pour créer un Entity Data Model

Dans le menu Projet, cliquez sur Ajouter un nouvel élément.
Dans la liste des modèles installés, cliquez sur Données, puis sélectionnez l'élément de projet ADO.NET Entity Data Model.
Changez le nom en AdventureWorksModel.edmx et cliquez sur Ajouter.

L'Assistant Entity Data Model s'ouvre.
Dans la page Choisissez le contenu du modèle, cliquez sur Générer à partir de la base de données, puis sur Suivant.
Dans la page Choisir votre connexion de données, sélectionnez l'une des options suivantes :
- Si une connexion de données à l'exemple de base de données AdventureWorksLT est disponible dans la liste déroulante, sélectionnez-la.
  
  ou
- Cliquez sur Nouvelle connexion et créez une connexion à la base de données AdventureWorksLT.
Dans la page Choisir votre connexion de données, assurez-vous que l'option Enregistrer les paramètres de connexion de l'entité dans App.Config en tant que est sélectionnée puis cliquez sur Suivant.
Dans la page Choisir vos objets de base de données, développez Tables, puis sélectionnez la table SalesOrderHeader.
Cliquez sur Terminer.

Création du service

Créez un Service de données WCF pour exposer les données de l'Entity Data Model à une application WPF.

Pour créer le service

Dans le menu Projet, sélectionnez Ajouter un nouvel élément.
Dans la liste des modèles installés, cliquez sur Web, puis sélectionnez l'élément de projet Service de données WCF.
Dans la zone Nom, tapez AdventureWorksService.svc et cliquez sur Ajouter.

Visual Studio ajoute AdventureWorksService.svc au projet.

Configuration du service

Vous devez configurer le service pour qu'il fonctionne sur l'Entity Data Model que vous avez créé.

Pour configurer le service

Dans le fichier de code AdventureWorks.svc, remplacez la déclaration de classe AdventureWorksService par le code suivant.

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

Public Class AdventureWorksService
    Inherits DataService(Of AdventureWorksLTEntities)

    ' This method is called only once to initialize service-wide policies.
    Public Shared Sub InitializeService(ByVal config As IDataServiceConfiguration)
        config.SetEntitySetAccessRule("SalesOrderHeaders", EntitySetRights.All)
        config.UseVerboseErrors = True
    End Sub
End Class

Ce code met à jour la classe AdventureWorksService de sorte qu'elle dérive d'un DataService<T> qui fonctionne sur la classe du contexte de l'objet AdventureWorksLTEntities dans votre Entity Data Model. Il met également à jour la méthode InitializeService pour accorder aux clients du service un accès complet en lecture/écriture à l'entité SalesOrderHeader.

Générez le projet et vérifiez qu'aucune erreur ne se produit.

Création de l'application cliente WPF

Pour afficher les données du Service de données WCF, créez une application WPF avec une source de données basée sur le service. Plus loin dans cette procédure pas à pas, vous allez ajouter à l'application des contrôles liés aux données.

Pour créer l'application cliente WPF

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nœud de la solution, cliquez sur Ajouter, puis sélectionnez Nouveau projet.
Dans la boîte de dialogue Nouveau projet, développez Visual C# ou Visual Basic, puis sélectionnez Windows.
Sélectionnez le modèle de projet Application WPF.
Dans la zone Nom, tapez AdventureWorksSalesEditor, puis cliquez sur OK.

Visual Studio ajoute le projet AdventureWorksSalesEditor à la solution.
Dans le menu Données, cliquez sur Afficher les sources de données.

La fenêtre Sources de données s'ouvre.
Dans la fenêtre Sources de données, cliquez sur Ajouter une nouvelle source de données.

L'Assistant Configuration de source de données s'ouvre.
Dans la page Choisir un type de source de données de l'Assistant, sélectionnez Service, puis cliquez sur Suivant.
Dans la boîte de dialogue Ajouter une référence de service, cliquez sur Découvrir.

Visual Studio recherche la solution active pour les services disponibles et ajoute AdventureWorksService.svc à la liste des services disponibles dans la zone Services.
Dans la zone Espace de noms, tapez AdventureWorksService.
Dans la zone Services, cliquez sur AdventureWorksService.svc, puis sur OK.

Visual Studio télécharge les informations de service et revient à l'Assistant Configuration de source de données.
Dans la boîte de dialogue Ajouter une référence de service, cliquez sur Terminer.

Visual Studio ajoute les nœuds représentant les données retournées par le service dans la fenêtre Sources de données.

Définition de l'interface utilisateur de la fenêtre

Ajoutez plusieurs boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF. Plus loin dans cette procédure pas à pas, vous allez ajouter du code permettant aux utilisateurs d'afficher et de mettre à jour les enregistrements de vente à l'aide de ces boutons.

Pour créer la disposition de fenêtre

Dans l'Explorateur de solutions, double-cliquez sur MainWindow.xaml.

La fenêtre s'ouvre dans le Concepteur WPF.

Dans la vue XAML du concepteur, ajoutez le code suivant entre les balises <Grid> :

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

Générez le projet.

Création des contrôles liés aux données

Créez des contrôles affichant les enregistrements client en faisant glisser le nœud SalesOrderHeaders de la fenêtre Sources de données vers le concepteur.

Pour créer des contrôles liés aux données

Dans la fenêtre Sources de données, cliquez sur le menu déroulant pour le nœud SalesOrderHeaders et sélectionnez Détails.
Développez le nœud SalesOrderHeaders.
Pour cet exemple, certains champs ne vont pas s'afficher. Cliquez alors sur le menu déroulant situé à côté des nœuds suivants et sélectionnez Aucun :
- CreditCardApprovalCode
- ModifiedDate
- OnlineOrderFlag
- RevisionNumber
- rowguid
Cette action empêche Visual Studio de créer des contrôles liés aux données pour ces nœuds à l'étape suivante. Pour cette procédure pas à pas, il est supposé que l'utilisateur final n'a pas besoin d'afficher ces données.
Dans la fenêtre Sources de données, faites glisser le nœud SalesOrderHeaders vers la ligne de la grille située en dessous de la ligne contenant les boutons.

Visual Studio génère du XAML et du code qui créent un ensemble de contrôles liés aux données de la table Product. Pour plus d'informations sur le XAML et le code générés, consultez Liaison de contrôles WPF avec des données dans Visual Studio.
Dans le concepteur, cliquez sur la zone de texte à côté de l'étiquette Customer ID.
Dans la fenêtre Propriétés, cochez la case à côté de la propriété IsReadOnly.
Définissez la propriété IsReadOnly pour chacune des zones de texte suivantes :
- Purchase Order Number
- Sales Order ID
- Sales Order Number

Charger les données du service

Utilisez l'objet proxy du service pour charger les données de vente à partir du service, puis assignez les données retournées à la source de données pour le CollectionViewSource dans la fenêtre WPF.

Pour charger les données du service

Dans le concepteur, double-cliquez sur le texte MainWindow pour créer le gestionnaire d'événements Window_Loaded.

Remplacez le gestionnaire d'événements par le code suivant. Assurez-vous de remplacer l'adresse localhost dans ce code par l'adresse de l'hôte local de votre ordinateur de développement.

        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("https://localhost:45899/AdventureWorksService.svc"));
            salesQuery = dataServiceClient.SalesOrderHeaders;

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

    Private DataServiceClient As AdventureWorksService.AdventureWorksLTEntities
    Private SalesQuery As System.Data.Services.Client.DataServiceQuery(Of AdventureWorksService.SalesOrderHeader)
    Private OrdersViewSource As CollectionViewSource

    Private Sub Window_Loaded(ByVal Sender As Object, ByVal e As RoutedEventArgs) Handles MyBase.Loaded

        ' TODO: Modify the port number in the following URI as required.
        DataServiceClient = New AdventureWorksService.AdventureWorksLTEntities( _
        New Uri("https://localhost:32415/AdventureWorksService.svc"))
        SalesQuery = DataServiceClient.SalesOrderHeaders

        OrdersViewSource = CType(Me.FindResource("SalesOrderHeadersViewSource"), CollectionViewSource)
        OrdersViewSource.Source = SalesQuery.Execute()
        OrdersViewSource.View.MoveCurrentToFirst()
    End Sub

Ajoutez du code permettant aux utilisateurs de parcourir les enregistrements de vente à l'aide des boutons < et >.

Pour permettre aux utilisateurs de parcourir les enregistrements de vente

Dans le concepteur, double-cliquez sur le bouton < de la fenêtre.

Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements backButton_Click pour l'événement Click.

Ajoutez le code suivant au gestionnaire d'événements backButton_Click généré :

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

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

Revenez dans le concepteur et double-cliquez sur le bouton >.

Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements nextButton_Click pour l'événement Click.

Ajoutez le code suivant au gestionnaire d'événements nextButton_Click généré :

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

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

Enregistrement des modifications dans les enregistrements de vente

Ajoutez du code permettant aux utilisateurs d'afficher et enregistrer les modifications apportées aux enregistrements de vente à l'aide du bouton Enregistrer les modifications.

Pour ajouter la possibilité d'enregistrer les modifications apportées aux enregistrements de vente

Dans le concepteur, double-cliquez sur le bouton Enregistrer les modifications.

Visual Studio ouvre le fichier code-behind et crée un gestionnaire d'événements saveButton_Click pour l'événement Click.

Ajoutez le code ci-après au gestionnaire d'événements saveButton_Click.

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

        Dim CurrentOrder As AdventureWorksService.SalesOrderHeader = CType(OrdersViewSource.View.CurrentItem, AdventureWorksService.SalesOrderHeader)

        DataServiceClient.UpdateObject(CurrentOrder)
        DataServiceClient.SaveChanges()

Test de l'application

Générez et exécutez l'application pour vérifier que vous pouvez afficher et mettre à jour les enregistrements client.

Pour tester l'application

Dans le menu Générer, cliquez sur Générer la solution. Vérifiez que la solution se génère sans erreur.
Appuyez sur CTRL+F5.

Visual Studio démarre le projet AdventureWorksService sans le déboguer.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet AdventureWorksSalesEditor.
Dans le menu contextuel, sous Déboguer, cliquez sur Démarrer une nouvelle instance.

L'application s'exécute. Vérifiez ce qui suit :
- Les zones de texte affichent différents champs de données du premier enregistrement de vente, associé à l'ID de commande 71774.
- Vous pouvez cliquez sur les boutons > ou < pour parcourir les autres enregistrements de vente.
Dans l'un des enregistrements de vente, tapez du texte dans la zone Commentaire, puis cliquez sur Enregistrer les modifications.
Fermez l'application, puis redémarrez-la à partir de Visual Studio.
Accédez à l'enregistrement de vente que vous avez modifié et vérifiez que la modification est toujours présente après avoir fermé et réouvert l'application.
Fermez l'application.

Étapes suivantes

Une fois cette procédure pas à pas terminée, vous pouvez effectuer les tâches associées suivantes :

Découvrez comment utiliser la fenêtre Sources de données dans Visual Studio pour lier des contrôles WPF à d'autres types de sources de données. Pour plus d'informations, consultez Procédure pas à pas : liaison de contrôles WPF avec un groupe de données.
Découvrez comment utiliser la fenêtre Sources de données dans Visual Studio pour afficher des données associées (c'est-à-dire, des données dans une relation parent-enfant) dans des contrôles WPF. Pour plus d'informations, consultez Procédure pas à pas : affichage de données connexes dans une application WPF.

Voir aussi

Liaison de contrôles WPF avec des données dans Visual Studio
Comment : lier des contrôles WPF à des données dans Visual Studio
Procédure pas à pas : liaison de contrôles WPF avec un groupe de données
Vue d'ensemble
Vue d'ensemble d'Entity Framework
Vue d'ensemble des concepteurs WPF et Silverlight
Vue d'ensemble de la liaison de données

Partager via