Partager via

Procédure pas à pas : liaison de contrôles WPF avec un groupe de données

  • Article

 

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 produit encapsulés dans un dataset. Vous allez également ajouter des boutons pour parcourir les produits et enregistrer les modifications apportées aux enregistrements produit.

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

  • création d'une application WPF et d'un dataset généré à partir des données de l'exemple de base de données AdventureWorksLT ;

  • création d'un ensemble de contrôles liés aux données en faisant glisser une table de données depuis la fenêtre Sources de données vers une fenêtre du Concepteur WPF ;

  • création de boutons permettant d'avancer et de reculer dans les enregistrements produit ;

  • création d'un bouton permettant d'enregistrer les modifications effectuées par les utilisateurs sur les enregistrements produit dans la table de données 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 :

Création du projet

Créez un projet WPF. Le projet affichera les enregistrements produit.

Pour créer le projet

  1. Démarrez Visual Studio.

  2. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.

  3. Développez Visual Basic ou Visual C# et choisissez Windows.

  4. Sélectionnez le modèle de projet Application WPF.

  5. Dans la zone Nom, tapez AdventureWorksProductsEditor, puis cliquez sur OK.

    Visual Studio crée le projet AdventureWorksProductsEditor.

Création d'un dataset pour l'application

Avant de pouvoir créer des contrôles liés aux données, vous devez définir un modèle de données pour votre application et l'ajouter à la fenêtre Sources de données. Dans cette procédure pas à pas, vous allez créer un dataset à utiliser comme modèle de données.

Pour créer un dataset

  1. Dans le menu Données, cliquez sur Afficher les sources de données.

    La fenêtre Sources de données s'ouvre.

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

  3. Dans la page Choisir un type de source de données, sélectionnez Base de données, puis cliquez sur Suivant.

  4. Dans la page Choisir un modèle de base de données, sélectionnez Groupe de données, puis cliquez sur Suivant.

  5. 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, puis cliquez sur Suivant.

      ou

    • Cliquez sur Nouvelle connexion et créez une connexion à la base de données AdventureWorksLT.

  6. Dans la page Enregistrer la chaîne de connexion dans le fichier de configuration de l'application, cochez la case Oui, enregistrer la connexion en tant que, puis cliquez sur Suivant.

  7. Dans la page Choisir vos objets de base de données, développez Tables, puis sélectionnez la table Product (SalesLT).

  8. Cliquez sur Terminer.

    Visual Studio ajoute un nouveau fichier AdventureWorksLTDataSet.xsd au projet, ainsi qu'un élément AdventureWorksLTDataSet correspondant dans la fenêtre Sources de données. Le fichier AdventureWorksLTDataSet.xsd définit un dataset typé nommé AdventureWorksLTDataSet et un TableAdapter nommé ProductTableAdapter. Plus loin dans cette procédure pas à pas, vous allez utiliser le ProductTableAdapter pour remplir le dataset avec des données et enregistrer les modifications dans la base de données.

  9. Générez le projet.

Modification de la méthode Fill par défaut du TableAdapter

Pour remplir le dataset avec des données, utilisez la méthode Fill du ProductTableAdapter. Par défaut, la méthode Fill remplit le ProductDataTable du AdventureWorksLTDataSet avec toutes les lignes de données de la table Product. Vous pouvez modifier cette méthode pour qu'elle ne retourne qu'un sous-ensemble des lignes. Pour cette procédure pas à pas, modifiez la méthode Fill pour ne retourner que les lignes des produits qui disposent de photos.

Pour charger les lignes des produits disposant de photos

  1. Dans l'Explorateur de solutions, double-cliquez sur le fichier AdventureWorksLTDataSet.xsd.

    Le Concepteur de DataSet s'ouvre.

  2. Dans le concepteur, cliquez avec le bouton droit sur la requête Fill,GetData() et sélectionnez Configurer.

    L'Assistant Configuration de TableAdapter s'ouvre.

  3. Dans la page Entrer une instruction SQL, ajoutez la clause WHERE suivante après l'instruction SELECT dans la zone de texte.

    WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'

  4. Cliquez sur Terminer.

Définition de l'interface utilisateur

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 de parcourir les produits et d'enregistrer les modifications apportées à ces derniers à l'aide de ces boutons.

Pour définir l'interface utilisateur de la fenêtre

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

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

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

    <Grid.RowDefinitions>  
    <RowDefinition Height="75" />  
    <RowDefinition Height="625" />  
</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. Générez le projet.

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

Créez des contrôles affichant les enregistrements client en faisant glisser la table Product depuis la fenêtre Sources de données vers le Concepteur WPF.

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

  1. Dans la fenêtre Sources de données, cliquez sur le menu déroulant pour le nœud Product et sélectionnez Détails.

  2. Développez le nœud Product.

  3. 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 :

    • ProductCategoryID

    • ProductModelID

    • ThumbnailPhotoFileName

    • rowguid

    • ModifiedDate

  4. Cliquez sur le menu déroulant à côté du nœud ThumbNailPhoto et sélectionnez Image.

    Notes

    Par défaut, les éléments de la fenêtre Sources de données représentant des images ont leur contrôle par défaut défini sur Aucun. En effet, les images sont stockées en tant que tableaux d'octets dans les bases de données et les tableaux d'octets peuvent contenir aussi bien un simple tableau d'octets que le fichier exécutable d'une application volumineuse.

  5. Dans la fenêtre Sources de données, faites glisser le nœud Product vers la ligne de la grille située en dessous de la ligne contenant les boutons.

    Visual Studio génère du XAML qui définit un ensemble de contrôles liés aux données de la table Product. Il génère également du code qui charge les données. 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.

  6. Dans le concepteur, cliquez sur la zone de texte à côté de l'étiquette Product ID.

  7. Dans la fenêtre Propriétés, cochez la case à côté de la propriété IsReadOnly.

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

Pour permettre aux utilisateurs de parcourir les enregistrements produit

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

  2. Modifiez le gestionnaire d'événements Window_Loaded de sorte que ProductViewSource, AdventureWorksLTDataSet et AdventureWorksLTDataSetProductTableAdapter se trouvent en dehors de la méthode et accessibles par tout le formulaire. Ne les déclarez que globalement au formulaire, assignez-les dans le gestionnaire d'événements Window_Loaded de la manière suivante :

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

        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

  3. Ajoutez le code suivant au gestionnaire d'événements backButton_Click :

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

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

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

  5. Ajoutez le code suivant au gestionnaire d'événements nextButton_Click :

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

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

Enregistrement des modifications dans les enregistrements produit

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

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

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

  2. Ajoutez le code suivant au gestionnaire d'événements saveButton_Click :

                adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);

            AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)

    Notes

    Cet exemple utilise la méthode Save de TableAdapter pour enregistrer les modifications. Cela nous convient dans cette procédure pas à pas, car une seule table de données est modifiée. Si vous devez enregistrer des modifications dans plusieurs tables de données, utilisez plutôt la méthode UpdateAll de TableAdapterManager générée par Visual Studio avec votre dataset. Pour plus d'informations, consultez Vue d'ensemble de TableAdapterManager.

Test de l'application

Générez et exécutez l'application. Vérifiez que vous pouvez afficher et mettre à jour les enregistrements produit.

Pour tester l'application

  1. Appuyez sur F5.

    L'application se génère et s'exécute. Vérifiez ce qui suit :

    • Les zones de texte affichent les données du premier enregistrement produit qui dispose d'une photo. Ce produit est associé à l'ID de produit 713 et au nom Long-Sleeve Logo Jersey, S.

    • Vous pouvez cliquez sur les boutons > ou < pour parcourir les autres enregistrements produit.

  2. Dans l'un des enregistrements produit, modifiez la valeur Size, puis cliquez sur Enregistrer les modifications.

  3. Fermez l'application et redémarrez-la en appuyant sur F5 dans Visual Studio.

  4. Accédez à l'enregistrement produit que vous avez modifié et vérifiez que la modification a été appliquée.

  5. Fermez l'application.

Étapes suivantes

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

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
Utilisation de groupes de données dans Visual Studio
Vue d'ensemble des concepteurs WPF et Silverlight
Vue d'ensemble de la liaison de données