Lier les contrôles WPF à un ensemble de données dans les applications .NET Framework

  • Article

Remarque

Les jeux de données et les classes associées sont des technologies .NET Framework héritées qui datent du début des années 2000. Elles permettent aux applications d’utiliser des données en mémoire pendant que les applications sont déconnectées de la base de données. Elles sont particulièrement utiles aux applications qui permettent aux utilisateurs de modifier des données, et de rendre ces changements persistants dans la base de données. Même si les jeux de données sont une technologie très efficace, nous vous recommandons d’utiliser Entity Framework Core pour les nouvelles applications .NET. Entity Framework offre un moyen plus naturel d’utiliser des données tabulaires en tant que modèles objet. De plus, il présente une interface de programmation plus simple.

Dans cette procédure pas à pas, vous créez 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 ajoutez également 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

Dans cet article, il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur Visual Studio. Il se peut que vous utilisiez une autre édition de Visual Studio ou d’autres paramètres d’environnement. Pour plus d’informations, consultez Personnaliser l’IDE.

Prérequis

Vous devez disposer des éléments suivants pour exécuter cette procédure pas à pas :

  • Pour effectuer ce tutoriel, vous devez installer les charges de travail Développement de bureau .NET et Stockage et traitement des données dans Visual Studio. Pour les installer, ouvrez Visual Studio Installer et choisissez Modifier (ou Plus>Modifier) en regard de la version de Visual Studio que vous souhaitez modifier. Consultez Modifier 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 AdventureWorks Light (AdventureWorksLT). Pour télécharger la base de données, consultez Exemples de bases de données AdventureWorks.

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éer le projet

Créez un projet WPF pour afficher les enregistrements produit.

  1. Ouvrez Visual Studio.

  2. Dans la fenêtre de démarrage, choisissez Créer un projet.

  3. Recherchez le modèle de projet C# WPF App et procédez comme suit pour créer le projet, en le nommant AdventureWorksProductsEditor.

    Visual Studio crée le projet AdventureWorksProductsEditor.

Créer un jeu de données 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.

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

    • 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. Créez le projet.

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

  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éfinir 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.

  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">&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. Créez le projet.

Créer des 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.

  1. Dans la fenêtre Sources de données, cliquez sur le menu de la liste déroulante 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 de la liste déroulante situé à côté des nœuds suivants, puis sélectionnez Aucun :

    • IDCatégorieProduit

    • IDModèleProduit

    • NomFichierPhotoMiniature

    • rowguid

    • DateModification

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

    Remarque

    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 la vue XAML et le code générés, consultez Lier des contrôles WPF à 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 en regard de la propriété IsReadOnly.

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

  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 soient accessibles par tout le formulaire. Ne déclarez ces éléments que globalement au formulaire, et 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();
}

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

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

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

Enregistrer des modifications dans les enregistrements produit

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

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

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

Tester l’application

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

  1. Appuyez sur F5.

    L'application se génère et s'exécute. Vérifiez les éléments suivants :

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

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

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

  3. Fermez l’application, puis 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 tester les tâches associées suivantes :

Contenu connexe