Partager via

Procédure pas à pas : liaison de contrôles WPF avec un modèle Entity Data Model

  • Article

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 Entity Data Model. Vous ajouterez également des boutons que les clients peuvent utiliser pour naviguer dans les enregistrements client et enregistrer des modifications apportées aux enregistrements.

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

  • Création d'une application WPF et d'un Entity Data Model généré à partir de données 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 entité 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 client

  • Création d'un bouton qui enregistre les modifications apportées aux contrôles dans l'Entity Data Model 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. 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 :

Création du projet

Créez un projet WPF pour afficher les enregistrements de client.

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#, puis sélectionnez Windows.

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

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

    Visual Studio crée le projet AdventureWorksCustomerEditor.

Création d'un Entity Data Model 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 créez un Entity Data Model.

Pour créer un modèle EDM (Entity Data Model)

  1. Dans le menu Données, cliquez sur Ajouter une nouvelle source de données pour lancer l'Assistant Configuration de source de données.

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

  3. Dans la page Choisir un modèle de base de données, cliquez sur Entity Data Model, puis sur Suivant.

  4. Dans la page Choisir le contenu du Model, cliquez sur Générer à partir de la base de données, puis sur Suivant.

  5. Dans la page Choisir votre connexion de données, effectuez l'une des opérations 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.

    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.

  6. Dans la page Choisir vos objets de base de données, développez le nœud Tables, puis sélectionnez la table Customer.

  7. Cliquez sur Terminer.

    Le fichier Model1.edmx s'ouvre dans le concepteur.

  8. Générez le projet.

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

Ajoutez des boutons à la fenêtre en modifiant le code XAML dans le Concepteur WPF.

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="425" />
</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. Générez le projet.

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

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

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

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

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

  3. Développez le nœud Clients.

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

    • NameStyle

    • PasswordHash

    • PasswordSalt

    • rowGuid

    • ModifiedDate

  5. Depuis la fenêtre Sources de données, faites glisser le nœud Clients vers la zone située sous les boutons.

  6. Dans le concepteur, cliquez sur la zone de texte en regard de l'étiquette ID du client.

  7. Dans la fenêtre Propriétés, activez la case à cocher en regard de la propriété IsReadOnly.

  8. Générez le projet.

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

Pour permettre aux utilisateurs de naviguer dans les enregistrements de client

  1. Dans le concepteur, double-cliquez sur le contrôle <.

    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 afin que CustomersViewSource et AdventureWorksLTEntities 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 CustomersViewSource As System.Windows.Data.CollectionViewSource
Dim AdventureWorksLTEntities As AdventureWorksCustomerEditor.AdventureWorksLTEntities


Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    CustomersViewSource = CType(Me.FindResource("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
    AdventureWorksLTEntities = New AdventureWorksCustomerEditor.AdventureWorksLTEntities()
    'Load data into Customers. You can modify this code as needed.
    Dim CustomersQuery As System.Data.Objects.ObjectQuery(Of AdventureWorksCustomerEditor.Customer) = Me.GetCustomersQuery(AdventureWorksLTEntities)
    CustomersViewSource.Source = CustomersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly)
End Sub

    private System.Windows.Data.CollectionViewSource customersViewSource;
private AdventureWorksCustomerEditor.AdventureWorksLTEntities adventureWorksLTEntities;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    adventureWorksLTEntities = new AdventureWorksCustomerEditor.AdventureWorksLTEntities();
    // Load data into Customers. You can modify this code as needed.
    customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource")));
    System.Data.Objects.ObjectQuery<AdventureWorksCustomerEditor.Customer> customersQuery = this.GetCustomersQuery(adventureWorksLTEntities);
    customersViewSource.Source = customersQuery.Execute(System.Data.Objects.MergeOption.AppendOnly);
}

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

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

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

  4. Revenez au 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.

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

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

    if (customersViewSource.View.CurrentPosition < ((CollectionView)customersViewSource.View).Count - 1)
    customersViewSource.View.MoveCurrentToNext();

Point de contrôle

Générez et exécutez votre projet pour vous assurer que le code se compile correctement et que vous pouvez naviguer dans les enregistrements de client.

Pour tester l'application

  • Appuyez sur F5.

    L'application est générée et exécutée. Vérifiez les points suivants :

    • Les données de client sont affichées.

    • Vous pouvez cliquer sur le bouton > ou < pour naviguer dans les enregistrements de client.

Enregistrement des modifications apportées aux enregistrements de client

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

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

  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.

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

    AdventureWorksLTEntities.SaveChanges()

    adventureWorksLTEntities.SaveChanges();

Test de l'application

Générez et exécutez l'application pour vérifier qu'elle affiche les enregistrements de client et que vous avez la possibilité d'enregistrer les modifications que vous leur apportez.

Pour tester l'application

  1. Appuyez sur F5.

  2. Modifiez l'un des enregistrements de client, puis cliquez sur Enregistrer les modifications.

  3. Fermez l'application, puis redémarrez-la en appuyant sur F5.

  4. Naviguez jusqu'à l'enregistrement de client que vous avez modifié et vérifiez que la modification a été conservée.

  5. Fermez l'application.

Étapes suivantes

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

Voir aussi

Tâches

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

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

Concepts

Liaison de contrôles WPF avec des données dans Visual Studio

Vue d'ensemble des concepteurs WPF et Silverlight

Vue d'ensemble de la liaison de données

Autres ressources

Entity Data Model

Introducing the Entity Framework