Lier des contrôles WPF à un datasetBind WPF controls to a dataset

Dans cette procédure pas à pas, vous allez créer une application WPF qui contient des contrôles liés aux données.In this walkthrough, you will create a WPF application that contains data-bound controls. Les contrôles sont liés aux enregistrements produit encapsulés dans un dataset.The controls are bound to product records that are encapsulated in a dataset. Vous allez également ajouter des boutons pour parcourir les produits et enregistrer les modifications apportées aux enregistrements produit.You will also add buttons to browse through products and save changes to product records.

Cette procédure pas à pas décrit les tâches suivantes :This walkthrough illustrates the following tasks:

  • 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 ;Creating a WPF application and a dataset that is generated from data in the AdventureWorksLT sample database.

  • Création d’un ensemble de contrôles liés aux données en faisant glisser une table de données à partir de la des Sources de données fenêtre à une fenêtre dans le Concepteur WPF.Creating a set of data-bound controls by dragging a data table from the Data Sources window to a window in the WPF Designer.

  • création de boutons permettant d'avancer et de reculer dans les enregistrements produit ;Creating buttons that navigate forward and backward through product records.

  • 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.Creating a button that saves changes that users make to the product records to the data table and the underlying data source.

Note

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.Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments.The Visual Studio edition that you have and the settings that you use determine these elements. Pour plus d'informations, consultez Personnalisation de l'IDE.For more information, see Personalizing the IDE.

PrérequisPrerequisites

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :You need the following components to complete this walkthrough:

  • Visual StudioVisual 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.Access to a running instance of SQL Server or SQL Server Express that has the AdventureWorksLT sample database attached to it. Vous pouvez télécharger la base de données AdventureWorksLT à partir de la site CodePlex Web.You can download the AdventureWorksLT database from the CodePlex Web site.

La connaissance préalable des concepts suivants s'avère également utile, mais n'est pas obligatoire pour suivre cette procédure pas à pas :Prior knowledge of the following concepts is also helpful, but not required to complete the walkthrough:

Créer le projetCreate the project

Créez un projet WPF.Create a new WPF project. Le projet affichera les enregistrements produit.The project will display product records.

Pour créer le projetTo create the project

  1. Démarrez Visual Studio.Start Visual Studio.

  2. Dans le menu Fichier , pointez sur Nouveau, puis cliquez sur Projet.On the File menu, point to New, and then click Project.

  3. Développez Visual Basic ou Visual C#, puis sélectionnez Windows.Expand Visual Basic or Visual C#, and then select Windows.

  4. Sélectionnez le Application WPF modèle de projet.Select the WPF Application project template.

  5. Dans le nom , tapez AdventureWorksProductsEditor et cliquez sur OK.In the Name box, type AdventureWorksProductsEditor and click OK.

    Visual Studio crée le AdventureWorksProductsEditor projet.Visual Studio creates the AdventureWorksProductsEditor project.

Créer un jeu de données pour l’applicationCreate a dataset for the 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 des Sources de données fenêtre.Before you can create data-bound controls, you must define a data model for your application and add it to the Data Sources window. Dans cette procédure pas à pas, vous allez créer un dataset à utiliser comme modèle de données.In this walkthrough, you create a dataset to use as the data model.

Pour créer un datasetTo create a dataset

  1. Dans le menu Données , cliquez sur Afficher les sources de données.On the Data menu, click Show Data Sources.

    Le des Sources de données fenêtre s’ouvre.The Data Sources window opens.

  2. Dans la fenêtre Sources de données , cliquez sur Ajouter une nouvelle source de données.In the Data Sources window, click Add New Data Source.

    Le Configuration de Source de données Assistant s’ouvre.The Data Source Configuration wizard opens.

  3. Sur le choisir un Type de Source de données page, sélectionnez base de données, puis cliquez sur suivant.On the Choose a Data Source Type page, select Database, and then click Next.

  4. Sur le choisir un modèle de base de données page, sélectionnez Dataset, puis cliquez sur suivant.On the Choose a Database Model page, select Dataset, and then click Next.

  5. Sur le choisir votre connexion de données page, sélectionnez une des options suivantes :On the Choose Your Data Connection page, select one of the following options:

    • Si une connexion de données à la base de données AdventureWorksLT est disponible dans la liste déroulante, sélectionnez-la, puis suivant.If a data connection to the AdventureWorksLT sample database is available in the drop-down list, select it and then click Next.

    • Cliquez sur nouvelle connexionet créer une connexion à la base de données AdventureWorksLT.Click New Connection, and create a connection to the AdventureWorksLT database.

  6. Sur le enregistrer la chaîne de connexion dans le fichier de configuration page, sélectionnez le Oui, enregistrer la connexion en tant que case à cocher, puis cliquez sur suivant.On the Save the Connection String to the Application Configure File page, select the Yes, save the connection as check box, and then click Next.

  7. Sur le choisir vos objets de base de données page, développez Tables, puis sélectionnez le Product (SalesLT) table.On the Choose Your Database Objects page, expand Tables, and then select the Product (SalesLT) table.

  8. Cliquez sur Terminer.Click Finish.

    Visual Studio ajoute un nouveau AdventureWorksLTDataSet.xsd fichier pour le projet et il ajoute un correspondant AdventureWorksLTDataSet d’élément à la des Sources de données fenêtre.Visual Studio adds a new AdventureWorksLTDataSet.xsd file to the project, and it adds a corresponding AdventureWorksLTDataSet item to the Data Sources window. Le AdventureWorksLTDataSet.xsd fichier définit un dataset typé nommé AdventureWorksLTDataSet et un TableAdapter nommé ProductTableAdapter.The AdventureWorksLTDataSet.xsd file defines a typed dataset named AdventureWorksLTDataSet and a TableAdapter named 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.Later in this walkthrough, you will use the ProductTableAdapter to fill the dataset with data and save changes back to the database.

  9. Générez le projet.Build the project.

Modifier la méthode de remplissage par défaut du TableAdapterEdit the default fill method of the TableAdapter

Pour remplir le dataset avec des données, utilisez la méthode Fill du ProductTableAdapter.To fill the dataset with data, use the Fill method of the ProductTableAdapter. Par défaut, la méthode Fill remplit le ProductDataTable du AdventureWorksLTDataSet avec toutes les lignes de données de la table Product.By default, the Fill method fills the ProductDataTable in the AdventureWorksLTDataSet with all rows of data from the Product table. Vous pouvez modifier cette méthode pour qu'elle ne retourne qu'un sous-ensemble des lignes.You can modify this method to return only a subset of the rows. Pour cette procédure pas à pas, modifiez la méthode Fill pour ne retourner que les lignes des produits qui disposent de photos.For this walkthrough, modify the Fill method to return only rows for products that have photos.

Pour charger les lignes des produits disposant de photosTo load product rows that have photos

  1. Dans l’Explorateur de solutions, double-cliquez sur le AdventureWorksLTDataSet.xsd fichier.In Solution Explorer, double-click the AdventureWorksLTDataSet.xsd file.

    Le Concepteur de DataSet s'ouvre.The Dataset designer opens.

  2. Dans le concepteur, cliquez sur le Fill, GetData de requête et sélectionnez configurer.In the designer, right-click the Fill, GetData() query and select Configure.

    Le Configuration de TableAdapter Assistant s’ouvre.The TableAdapter Configuration wizard opens.

  3. Dans le Entrez une instruction SQL , ajoutez la clause WHERE suivante après la SELECT instruction dans la zone de texte.In the Enter a SQL Statement page, add the following WHERE clause after the SELECT statement in the text box.

    WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
    
  4. Cliquez sur Terminer.Click Finish.

Définir l’interface utilisateurDefine the user interface

Ajoutez plusieurs boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF.Add several buttons to the window by modifying the XAML in the WPF Designer. 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.Later in this walkthrough, you will add code that enables users to scroll through and save changes to products records by using these buttons.

Pour définir l'interface utilisateur de la fenêtreTo define the user interface of the window

  1. Dans l’Explorateur de solutions, double-cliquez sur MainWindow.xaml.In Solution Explorer, double-click MainWindow.xaml.

    La fenêtre s'ouvre dans le Concepteur WPF.The window opens in the WPF Designer.

  2. Dans la vue XAMLXAML du concepteur, ajoutez le code suivant entre les balises <Grid> :In the XAMLXAML view of the designer, add the following code between the <Grid> tags:

    <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.Build the project.

Créer des contrôles liés aux donnéesCreate data-bound controls

Créer des contrôles qui affichent les enregistrements client en faisant glisser le Product de table à partir de la des Sources de données fenêtre vers le Concepteur WPF.Create controls that display customer records by dragging the Product table from the Data Sources window to the WPF Designer.

Pour créer des contrôles liés aux donnéesTo create data-bound controls

  1. Dans le des Sources de données fenêtre, cliquez sur le menu déroulant pour le produit nœud et sélectionnez détails.In the Data Sources window, click the drop-down menu for the Product node and select Details.

  2. Développez le produit nœud.Expand the Product node.

  3. Pour cet exemple, certains champs n’apparaissent pas, par conséquent, cliquez sur le menu déroulant en regard des nœuds suivants et sélectionnez aucun:For this example, some fields will not be displayed, so click the drop-down menu next to the following nodes and select None:

    • ProductCategoryIDProductCategoryID

    • ProductModelIDProductModelID

    • ThumbnailPhotoFileNameThumbnailPhotoFileName

    • rowguidrowguid

    • ModifiedDateModifiedDate

  4. Cliquez sur le menu déroulant en regard du ThumbNailPhoto nœud et sélectionnez Image.Click the drop-down menu next to the ThumbNailPhoto node and select Image.

    Note

    Par défaut, les éléments de la des Sources de données fenêtre qui représentent des images ont leur contrôle par défaut la valeur aucun.By default, items in the Data Sources window that represent pictures have their default control set to None. 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.This is because pictures are stored as byte arrays in databases, and byte arrays can contain anything from a simple array of bytes to the executable file of a large application.

  5. À partir de la des Sources de données fenêtre, faites glisser le produit nœud à la ligne de la grille sous la ligne qui contient les boutons.From the Data Sources window, drag the Product node to the grid row under the row that contains the buttons.

    Visual Studio génère du code XAML qui définit un ensemble de contrôles liés aux données dans le produits table.Visual Studio generates XAML that defines a set of controls that are bound to data in the Products table. Il génère également du code qui charge les données.It also generates code that loads the data. Pour plus d’informations sur le XAML et le code généré, consultez WPF de lier des contrôles aux données dans Visual Studio.For more information about the generated XAML and code, see Bind WPF controls to data in Visual Studio.

  6. Dans le concepteur, cliquez sur la zone de texte en regard du ID de produit étiquette.In the designer, click the text box next to the Product ID label.

  7. Dans le propriétés fenêtre, sélectionnez la case à cocher à côté du IsReadOnly propriété.In the Properties window, select the check box next to the IsReadOnly property.

Ajoutez le code qui permet aux utilisateurs de faire défiler les enregistrements produit à l’aide de la < et > boutons.Add code that enables users to scroll through product records by using the < and > buttons.

Pour permettre aux utilisateurs de parcourir les enregistrements produitTo enable users to navigate product records

  1. Dans le concepteur, double-cliquez sur le < bouton sur la surface de la fenêtre.In the designer, double-click the < button on the window surface.

    Visual Studio ouvre le fichier code-behind et crée un nouveau backButton_Click Gestionnaire d’événements pour le Click événement.Visual Studio opens the code-behind file, and creates a new backButton_Click event handler for the Click event.

  2. Modifier la Window_Loaded Gestionnaire d’événements, donc la ProductViewSource, AdventureWorksLTDataSet, et AdventureWorksLTDataSetProductTableAdapter sont en dehors de la méthode et accessibles par tout le formulaire.Modify the Window_Loaded event handler, so the ProductViewSource, AdventureWorksLTDataSet, and AdventureWorksLTDataSetProductTableAdapter are outside of the method and accessible to the entire form. Déclarer uniquement ces global au formulaire et les assigner au sein de la Window_Loaded Gestionnaire d’événements semblable au suivant :Declare only these to be global to the form, and assign them within the Window_Loaded event handler similar to the following:

    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 :Add the following code to the backButton_Click event handler:

    if (productViewSource.View.CurrentPosition > 0)
    {
        productViewSource.View.MoveCurrentToPrevious();
    }
    
    If ProductViewSource.View.CurrentPosition > 0 Then
        ProductViewSource.View.MoveCurrentToPrevious()
    End If
    
  4. Retourner au concepteur et double-cliquez sur le > bouton.Return to the designer and double-click the > button.

  5. Ajoutez le code suivant au gestionnaire d'événements nextButton_Click :Add the following code to the nextButton_Click event handler:

    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
    

Enregistrer les modifications apportées aux enregistrements produitSave changes to product records

Ajoutez le code qui permet aux utilisateurs d’enregistrer les modifications apportées aux enregistrements produit à l’aide de la enregistrer les modifications bouton.Add code that enables users to save changes to product records by using the Save changes button.

Pour ajouter la possibilité d'enregistrer les modifications apportées aux enregistrements produitTo add the ability to save changes to product records

  1. Dans le concepteur, double-cliquez sur le enregistrer les modifications bouton.In the designer, double-click the Save changes button.

    Visual Studio ouvre le fichier code-behind et crée un nouveau saveButton_Click Gestionnaire d’événements pour le Click événement.Visual Studio opens the code-behind file, and creates a new saveButton_Click event handler for the Click event.

  2. Ajoutez le code suivant au gestionnaire d'événements saveButton_Click :Add the following code to the saveButton_Click event handler:

    adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
    
    AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
    

    Note

    Cet exemple utilise la méthode Save de TableAdapter pour enregistrer les modifications.This example uses the Save method of the TableAdapter to save the changes. Cela nous convient dans cette procédure pas à pas, car une seule table de données est modifiée.This is appropriate in this walkthrough, because only one data table is being changed. 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.If you need to save changes to multiple data tables, you can alternatively use the UpdateAll method of the TableAdapterManager that Visual Studio generates with your dataset. Pour plus d’informations, consultez TableAdapters.For more information, see TableAdapters.

Tester l’applicationTest the application

Générez et exécutez l’application.Build and run the application. Vérifiez que vous pouvez afficher et mettre à jour les enregistrements produit.Verify that you can view and update product records.

Pour tester l'applicationTo test the application

  1. Appuyez sur F5.Press F5.

    L'application se génère et s'exécute.The application builds and runs. Vérifiez ce qui suit :Verify the following:

    • Les zones de texte affichent les données du premier enregistrement produit qui dispose d'une photo.The text boxes display data from the first product record that has a photo. Ce produit a l’ID de produit 713 et le nom Long-Sleeve Logo Jersey, S.This product has the product ID 713, and the name Long-Sleeve Logo Jersey, S.

    • Vous pouvez cliquer sur le > ou < boutons pour parcourir les autres enregistrements produit.You can click the > or < buttons to navigate through other product records.

  2. Dans un des enregistrements de produit, modifiez le taille valeur, puis cliquez sur enregistrer les modifications.In one of the product records, change the Size value, and then click Save changes.

  3. Fermez l’application et redémarrez l’application en appuyant sur F5 dans Visual Studio.Close the application, and then restart the application by pressing F5 in Visual Studio.

  4. Accédez à l'enregistrement produit que vous avez modifié et vérifiez que la modification a été appliquée.Navigate to the product record you changed, and verify that the change persisted.

  5. Fermez l'application.Close the application.

Étapes suivantesNext Steps

Une fois cette procédure pas à pas terminée, vous pouvez effectuer les tâches associées suivantes :After completing this walkthrough, you can perform the following related tasks:

Voir aussiSee also