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

Article
08/10/2011

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 de produit encapsulés dans un groupe de données (dataset). Vous ajouterez également des boutons pour parcourir les différents produits et enregistrerez les modifications apportées aux enregistrements de produit.

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

Création d'une application WPF et d'un groupe de données généré à partir de l'exemple de base de données AdventureWorksLT
Création d'un jeu de contrôles liés aux données en faisant glisser une table de données de la fenêtre Sources de données vers une fenêtre du Concepteur WPF
Création de boutons permettant de naviguer vers l'avant et vers l'arrière dans les enregistrements de produit
Création d'un bouton permettant d'enregistrer les modifications apportées par les utilisateurs aux enregistrements de produit dans la table de données et dans 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. Ces éléments dépendent de l'édition de Visual Studio dont vous disposez et des paramètres que vous utilisez. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

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

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

Une connaissance préalable des concepts suivants est aussi utile, mais pas obligatoire, pour effectuer cette procédure pas à pas :

DataSets et TableAdapters. Pour plus d'informations, consultez Utilisation de groupes de données dans Visual Studio et Vue d'ensemble de TableAdapter.
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

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

Pour créer le projet

Démarrez Visual Studio.
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet.
Développez Visual Basic ou Visual C#, puis sélectionnez Windows.
Sélectionnez le modèle de projet Application WPF.
Dans la zone Nom, tapez AdventureWorksProductsEditor, puis cliquez sur OK.

Visual Studio crée le projet AdventureWorksProductsEditor.

Création d'un groupe 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 groupe de données à utiliser comme modèle de données.

Pour créer un groupe de données

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, sélectionnez Base de données, puis cliquez sur Suivant.
Dans la page Choisir un modèle de base de données, sélectionnez Groupe de données, puis cliquez 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, puis cliquez sur Suivant.
  
  ou
- Cliquez sur Nouvelle connexion et créez une connexion à la base de données AdventureWorksLT.
Dans la page Enregistrer la chaîne de connexion dans le fichier de configuration, activez la case à cocher Oui, enregistrer la connexion en tant que, puis cliquez sur Suivant.
Dans la page Choisir vos objets de base de données, développez le nœud Tables, puis sélectionnez la table Product (SalesLT).
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é appelé AdventureWorksLTDataSet et un TableAdapter nommé ProductTableAdapter. À une étape ultérieure de cette procédure, vous utiliserez le ProductTableAdapter pour remplir le groupe de données avec les données appropriées et vous répercuterez les modifications dans la base de données.
Générez le projet.

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

Pour remplir le groupe de données avec les 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 retourner uniquement un sous-ensemble des lignes. Pour cette procédure pas à pas, modifiez la méthode Fill afin que seules les lignes pour les produits comportant des photos soient retournées.

Pour charger des lignes de produit comportant des photos

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

Le Concepteur de DataSet s'ouvre.
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.
Dans la page Entrez 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'
```
Cliquez sur Terminer.

Définition de l'interface utilisateur

Ajoutez plusieurs boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF. À une étape ultérieure de cette procédure, vous ajouterez du code permettant aux utilisateurs d'effectuer un défilement et vous enregistrerez les modifications apportées aux enregistrements de produit à l'aide de ces boutons.

Pour définir l'interface utilisateur de la 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="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>

Générez le projet.

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

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

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 du nœud Produit et sélectionnez Détails.
Développez le nœud Produit.
Pour cet exemple, certains champs ne seront pas affichés. Par conséquent, cliquez sur le menu déroulant en regard des nœuds suivants et sélectionnez Aucun :
- ProductCategoryID
- ProductModelID
- ThumbnailPhotoFileName
- rowguid
- ModifiedDate
Cliquez sur le menu déroulant en regard du nœud ThumbNailPhoto et sélectionnez Image.

Notes

Le contrôle par défaut des éléments de la fenêtre Sources de données qui représentent des images a la valeur Aucun par défaut. Cela est dû au fait que les images sont stockées sous forme de tableaux d'octets dans les bases de données, or les tableaux d'octets peuvent contenir divers types d'éléments, depuis un simple tableau d'octets jusqu'au fichier exécutable d'une application volumineuse.
Dans la fenêtre Sources de données, faites glisser le nœud Produit vers la ligne de grille située sous la ligne contenant les boutons.

Visual Studio génère du code XAML qui définit un jeu de contrôles liés aux données de la table Products. Il génère également du code qui charge les données. Pour plus d'informations sur le langage XAML et le code généré, consultez Liaison de contrôles WPF avec des données dans Visual Studio.
Dans le concepteur, cliquez sur la zone de texte en regard de l'étiquette ID de produit.
Dans la fenêtre Propriétés, activez la case à cocher en regard de la propriété IsReadOnly.

Ajoutez le code permettant aux utilisateurs de faire défiler les enregistrements de produit à l'aide des boutons < et >.

Pour permettre aux utilisateurs de naviguer dans les enregistrements de produit

Dans le concepteur, double-cliquez sur le bouton < dans la surface 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.

Modifiez le gestionnaire d'événements Window_Loaded afin que ProductViewSource, AdventureWorksLTDataSet et AdventureWorksLTDataSetProductTableAdapter soient en dehors de la méthode et accessibles par la totalité du formulaire. Déclarez ces variables globales uniquement dans le formulaire, assignez-les dans le gestionnaire d'événements Window_Loaded d'une manière similaire à ce qui suit :

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

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

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

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

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

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

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

Enregistrement des modifications dans les enregistrements de produit

Ajoutez du code permettant aux utilisateurs d'enregistrer des modifications dans les enregistrements de produit à l'aide du bouton Enregistrer les modifications.

Pour ajouter la possibilité d'enregistrer des modifications dans les enregistrements de produit

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 suivant au gestionnaire d'événements saveButton_Click :
```
AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
```
```
adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
```
Notes

Cet exemple utilise la méthode Save du TableAdapter pour enregistrer les modifications. Cette méthode se révèle appropriée 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, vous pouvez également utiliser la méthode UpdateAll du TableAdapterManager que Visual Studio génère avec votre groupe de données. 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 de produit.

Pour tester l'application

Appuyez sur F5.

L'application est générée et exécutée. Vérifiez les points suivants :
- Les zones de texte affichent les données du premier enregistrement de produit comportant une photo. Ce produit porte l'ID de produit 713, et le nom Long-Sleeve Logo Jersey, S.
- Vous pouvez cliquer sur les boutons > ou < pour naviguer dans les autres enregistrements de produit.
Dans l'un des enregistrements de produit, modifiez la valeur Taille, puis cliquez sur Enregistrer les modifications.
Fermez l'application, puis redémarrez-la en appuyant sur F5 dans Visual Studio.
Naviguez jusqu'à l'enregistrement de produit modifié et vérifiez que la modification a été conservée.
Fermez l'application.

Étapes suivantes

À l'issue de cette procédure pas à pas, vous pourrez effectuer les tâches connexes suivantes :

Apprenez 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 : liaisons de contrôles WPF à un service de données WCF et Procédure pas à pas : liaison de contrôles WPF avec un modèle Entity Data Model.
Apprenez comment utiliser la fenêtre Sources de données dans Visual Studio pour afficher les données associées (c'est-à-dire les 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.