Liaison de données avec WPF

Important

Ce document est valide pour WPF sur le .NET Framework uniquement

Ce document décrit la liaison de données pour WPF sur le .NET Framework. Pour les nouveaux projets .NET Core, nous vous recommandons d’utiliser EF Core au lieu d’Entity Framework 6. La documentation relative à la liaison de données dans EF Core est ici : Prise en main avec WPF.

Cette procédure pas à pas montre comment lier des types POCO aux contrôles WPF dans un formulaire « master-detail ». L’application utilise les API Entity Framework pour remplir des objets avec des données de la base de données, suivre les modifications et conserver des données dans la base de données.

Le modèle définit deux types qui participent à une relation un-à-plusieurs : Catégorie (principal\master) et Product (dépendant\detail). Ensuite, les outils Visual Studio sont utilisés pour lier les types définis dans le modèle aux contrôles WPF. L’infrastructure de liaison de données WPF permet la navigation entre les objets associés : la sélection de lignes dans la vue maître entraîne la mise à jour de la vue détaillée avec les données enfants correspondantes.

Les captures d’écran et les listes de code de cette procédure pas à pas sont extraites de Visual Studio 2013, mais vous pouvez effectuer cette procédure pas à pas avec Visual Studio 2012 ou Visual Studio 2010.

Utiliser l’option « Object » pour créer des sources de données WPF

Avec la version précédente d’Entity Framework, nous vous recommandons d’utiliser l’option Base de données lors de la création d’une nouvelle source de données basée sur un modèle créé avec le concepteur EF. Cela était dû au fait que le concepteur générerait un contexte dérivé de ObjectContext et de classes d’entité dérivées d’EntityObject. L’utilisation de l’option Base de données vous permet d’écrire le meilleur code pour interagir avec cette surface d’API.

Les concepteurs EF pour Visual Studio 2012 et Visual Studio 2013 génèrent un contexte qui dérive de DbContext avec des classes d’entités POCO simples. Avec Visual Studio 2010, nous vous recommandons d’échanger vers un modèle de génération de code qui utilise DbContext comme décrit plus loin dans cette procédure pas à pas.

Lorsque vous utilisez l’aire de l’API DbContext, vous devez utiliser l’option Object lors de la création d’une nouvelle source de données, comme indiqué dans cette procédure pas à pas.

Si nécessaire, vous pouvez revenir à la génération de code basée sur ObjectContext pour les modèles créés avec ef Designer.

Prérequis

Vous devez avoir installé Visual Studio 2013, Visual Studio 2012 ou Visual Studio 2010 pour effectuer cette procédure pas à pas.

Si vous utilisez Visual Studio 2010, vous devez également installer NuGet. Pour plus d’informations, consultez Installation de NuGet.  

Création de l’application

  • Ouvrez Visual Studio.
  • Fichier - Nouveau ->> Project....
  • Sélectionner Windows dans le volet gauche et WPFApplication dans le volet droit
  • Entrez WPFwithEFSample comme nom
  • Sélectionnez OK.

Installer le package NuGet Entity Framework

  • Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet WinFormswithEFSample
  • Sélectionnez Gérer les packages NuGet...
  • Dans la boîte de dialogue Gérer les packages NuGet, sélectionnez l’onglet En ligne et choisissez le package EntityFramework
  • Cliquez sur Install.

    Notes

    Outre l’assembly EntityFramework, une référence à System.ComponentModel.DataAnnotations est également ajoutée. Si le projet a une référence à System.Data.Entity, il est supprimé lorsque le package EntityFramework est installé. L’assembly System.Data.Entity n’est plus utilisé pour les applications Entity Framework 6.

Définir un modèle

Dans cette procédure pas à pas, vous pouvez choisir d’implémenter un modèle à l’aide de Code First ou d’EF Designer. Effectuez l’une des deux sections suivantes.

Option 1 : Définir un modèle à l’aide du code First

Cette section montre comment créer un modèle et sa base de données associée à l’aide de Code First. Passez à la section suivante (Option 2 : Définir un modèle à l’aide de database First) si vous préférez utiliser Database First pour inverser l’ingénierie de votre modèle à partir d’une base de données à l’aide du concepteur EF

Lorsque vous utilisez le développement Code First, vous commencez généralement par écrire des classes .NET Framework qui définissent votre modèle conceptuel (domaine).

  • Ajoutez une nouvelle classe au WPFwithEFSample :
    • Cliquez avec le bouton droit sur le nom du projet.
    • Sélectionnez Ajouter, puis Nouvel élément
    • Sélectionnez Classe et entrez Product pour le nom de la classe
  • Remplacez la définition de classe Product par le code suivant :
    namespace WPFwithEFSample
    {
        public class Product
        {
            public int ProductId { get; set; }
            public string Name { get; set; }

            public int CategoryId { get; set; }
            public virtual Category Category { get; set; }
        }
    }
  • Ajoutez une classe Category avec la définition suivante :
    using System.Collections.ObjectModel;

    namespace WPFwithEFSample
    {
        public class Category
        {
            public Category()
            {
                this.Products = new ObservableCollection<Product>();
            }

            public int CategoryId { get; set; }
            public string Name { get; set; }

            public virtual ObservableCollection<Product> Products { get; private set; }
        }
    }

La propriété Products sur la classe Category et la propriété Category de la classe Product sont des propriétés de navigation. Dans Entity Framework, les propriétés de navigation permettent de parcourir une relation entre deux types d’entités.

En plus de définir des entités, vous devez définir une classe qui dérive de DbContext et expose les propriétés TEntity> DbSet<. Les propriétés TEntity> DbSet<indiquent au contexte quels types vous souhaitez inclure dans le modèle.

Une instance du type dérivé DbContext gère les objets d’entité pendant l’exécution, notamment le remplissage d’objets avec des données d’une base de données, le suivi des modifications et la persistance des données dans la base de données.

  • Ajoutez une nouvelle classe ProductContext au projet avec la définition suivante :
    using System.Data.Entity;

    namespace WPFwithEFSample
    {
        public class ProductContext : DbContext
        {
            public DbSet<Category> Categories { get; set; }
            public DbSet<Product> Products { get; set; }
        }
    }

Compilez le projet.

Option 2 : Définir un modèle à l’aide de Database First

Cette section montre comment utiliser Database First pour inverser l’ingénierie de votre modèle à partir d’une base de données à l’aide du concepteur EF. Si vous avez terminé la section précédente (Option 1 : Définir un modèle à l’aide de Code First), ignorez cette section et accédez directement à la section Chargement différé .

Créer une base de données existante

En règle générale, lorsque vous ciblez une base de données existante, elle sera déjà créée, mais pour cette procédure pas à pas, nous devons créer une base de données à accéder.

Le serveur de base de données installé avec Visual Studio est différent selon la version de Visual Studio que vous avez installée :

  • Si vous utilisez Visual Studio 2010, vous allez créer une base de données SQL Express.
  • Si vous utilisez Visual Studio 2012, vous allez créer une base de données LocalDB .

Allons-y et générons la base de données.

  • Affichage -> Explorateur de serveurs

  • Cliquez avec le bouton droit sur Connexions de données -> Ajouter une connexion...

  • Si vous n’avez pas connecté à une base de données à partir de l’Explorateur de serveurs avant de devoir sélectionner Microsoft SQL Server comme source de données

    Modifier la source de données

  • Connectez-vous à LocalDB ou SQL Express, selon celui que vous avez installé, puis entrez Products comme nom de base de données.

    Ajouter une base de données locale de connexion

    Ajouter Connection Express

  • Sélectionnez OK et vous serez invité à créer une base de données, sélectionnez Oui.

    Créer une base de données

  • La nouvelle base de données s’affiche désormais dans l’Explorateur de serveurs, cliquez dessus avec le bouton droit, puis sélectionnez Nouvelle requête.

  • Copiez le code SQL suivant dans la nouvelle requête, puis cliquez avec le bouton droit sur la requête, puis sélectionnez Exécuter

    CREATE TABLE [dbo].[Categories] (
        [CategoryId] [int] NOT NULL IDENTITY,
        [Name] [nvarchar](max),
        CONSTRAINT [PK_dbo.Categories] PRIMARY KEY ([CategoryId])
    )

    CREATE TABLE [dbo].[Products] (
        [ProductId] [int] NOT NULL IDENTITY,
        [Name] [nvarchar](max),
        [CategoryId] [int] NOT NULL,
        CONSTRAINT [PK_dbo.Products] PRIMARY KEY ([ProductId])
    )

    CREATE INDEX [IX_CategoryId] ON [dbo].[Products]([CategoryId])

    ALTER TABLE [dbo].[Products] ADD CONSTRAINT [FK_dbo.Products_dbo.Categories_CategoryId] FOREIGN KEY ([CategoryId]) REFERENCES [dbo].[Categories] ([CategoryId]) ON DELETE CASCADE

Modèle d’ingénieur inverse

Nous allons utiliser Entity Framework Designer, qui est inclus dans Visual Studio, pour créer notre modèle.

  • Projet -> Ajouter un nouvel élément...

  • Sélectionnez Données dans le menu de gauche, puis ADO.NET Modèle de données d’entité

  • Entrez ProductModel comme nom, puis cliquez sur OK

  • Cette opération lance l’Assistant Modèle de données d’entité

  • Sélectionnez Générer à partir de la base de données , puis cliquez sur Suivant

    Choisir le contenu du modèle

  • Sélectionnez la connexion à la base de données que vous avez créée dans la première section, entrez ProductContext comme nom de la chaîne de connexion, puis cliquez sur Suivant.

    Choisir votre connexion

  • Cochez la case en regard de « Tables » pour importer toutes les tables, puis cliquez sur « Terminer ».

    Choisir vos objets

Une fois que le processus de l’ingénieur inverse a terminé le nouveau modèle est ajouté à votre projet et ouvert pour vous permettre d’afficher dans Entity Framework Designer. Un fichier App.config a également été ajouté à votre projet avec les détails de connexion de la base de données.

Étapes supplémentaires dans Visual Studio 2010

Si vous travaillez dans Visual Studio 2010, vous devez mettre à jour le concepteur EF pour utiliser la génération de code EF6.

  • Cliquez avec le bouton droit sur un emplacement vide de votre modèle dans le concepteur EF, puis sélectionnez Ajouter un élément de génération de code...
  • Sélectionnez Modèles en ligne dans le menu de gauche et recherchez DbContext
  • Sélectionnez le générateur EF 6.x DbContext pour C#, entrez ProductsModel comme nom, puis cliquez sur Ajouter

Mise à jour de la génération de code pour la liaison de données

EF génère du code à partir de votre modèle à l’aide de modèles T4. Les modèles fournis avec Visual Studio ou téléchargés à partir de la galerie Visual Studio sont destinés à une utilisation générale. Cela signifie que les entités générées à partir de ces modèles ont des propriétés T> ICollection<simples. Toutefois, lorsque vous effectuez une liaison de données à l’aide de WPF, il est souhaitable d’utiliser ObservableCollection pour les propriétés de collection afin que WPF puisse effectuer le suivi des modifications apportées aux collections. À cette fin, nous allons modifier les modèles pour utiliser ObservableCollection.

  • Ouvrez le Explorateur de solutions et recherchez le fichier ProductModel.edmx

  • Recherchez le fichier ProductModel.tt qui sera imbriqué sous le fichier ProductModel.edmx

    Modèle de modèle de produit WPF

  • Double-cliquez sur le fichier ProductModel.tt pour l’ouvrir dans l’éditeur Visual Studio

  • Recherchez et remplacez les deux occurrences de « ICollection » par « ObservableCollection ». Ceux-ci se trouvent environ aux lignes 296 et 484.

  • Recherchez et remplacez la première occurrence de « HashSet » par « ObservableCollection ». Cet événement se trouve environ à la ligne 50. Ne remplacez pas la deuxième occurrence de HashSet trouvée plus loin dans le code.

  • Recherchez et remplacez la seule occurrence de « System.Collections.Generic » par « System.Collections.ObjectModel ». Il se trouve environ à la ligne 424.

  • Enregistrez le fichier ProductModel.tt. Cela doit entraîner la régénération du code des entités. Si le code ne se régénère pas automatiquement, cliquez avec le bouton droit sur ProductModel.tt et choisissez « Exécuter l’outil personnalisé ».

Si vous ouvrez maintenant le fichier Category.cs (qui est imbriqué sous ProductModel.tt), vous devez voir que la collection Products a le type ObservableCollection<Product>.

Compilez le projet.

Chargement différé

La propriété Products sur la classe Category et la propriété Category de la classe Product sont des propriétés de navigation. Dans Entity Framework, les propriétés de navigation permettent de parcourir une relation entre deux types d’entités.

EF vous offre la possibilité de charger automatiquement des entités associées à partir de la base de données la première fois que vous accédez à la propriété de navigation. Avec ce type de chargement (appelé chargement différé), sachez que la première fois que vous accédez à chaque propriété de navigation, une requête distincte sera exécutée sur la base de données si le contenu n’est pas déjà dans le contexte.

Lorsque vous utilisez des types d’entités POCO, EF obtient un chargement différé en créant des instances de types proxy dérivés pendant l’exécution, puis en remplaçant les propriétés virtuelles dans vos classes pour ajouter le hook de chargement. Pour obtenir le chargement différé d’objets connexes, vous devez déclarer des getters de propriété de navigation en tant que getters publics et virtuels (substituables en Visual Basic) et votre classe ne doit pas être scellée (NotOverridable en Visual Basic). Lorsque vous utilisez des propriétés de navigation Database First, les propriétés de navigation sont automatiquement rendues virtuelles pour activer le chargement différé. Dans la section Code First, nous avons choisi de rendre les propriétés de navigation virtuelles pour la même raison.

Lier un objet à des contrôles

Ajoutez les classes définies dans le modèle en tant que sources de données pour cette application WPF.

  • Double-cliquez sur MainWindow.xaml dans Explorateur de solutions pour ouvrir le formulaire principal

  • Dans le menu principal, sélectionnez Project -> Ajouter une nouvelle source de données ... (dans Visual Studio 2010, vous devez sélectionner Données -> Ajouter une nouvelle source de données...)

  • Dans choisir un type de source de données, sélectionnez Objet , puis cliquez sur Suivant

  • Dans la boîte de dialogue Sélectionner les objets de données, déployez le WPFwithEFSample deux fois et sélectionnez Catégorie
    Il n’est pas nécessaire de sélectionner la source de données Product, car nous y accéderons via la propriété product sur la source de données Category

    Sélectionner des objets de données

  • Cliquez sur Terminer.

  • La fenêtre Sources de données est ouverte en regard de la fenêtre MainWindow.xaml Si la fenêtre Sources de données n’apparaît pas, sélectionnez Affichage -> Autres sources de données Windows>

  • Appuyez sur l’icône d’épingle, de sorte que la fenêtre Sources de données ne se masque pas automatiquement. Vous devrez peut-être appuyer sur le bouton Actualiser si la fenêtre était déjà visible.

    Sources de données

  • Sélectionnez la source de données Category et faites-la glisser sur le formulaire.

Ce qui suit s’est produit lorsque nous avons déplacé cette source :

  • La ressource categoryViewSource et le contrôle categoryDataGrid ont été ajoutés au code XAML
  • La propriété DataContext sur l’élément Grid parent a été définie sur « {StaticResource categoryViewSource } ». La ressource categoryViewSource sert de source de liaison pour l’élément grid externe\parent. Les éléments Grid internes héritent ensuite de la valeur DataContext de la grille parente (la propriété ItemsSource de categoryDataGrid est définie sur « {Binding} »)
    <Window.Resources>
        <CollectionViewSource x:Key="categoryViewSource"
                                d:DesignSource="{d:DesignInstance {x:Type local:Category}, CreateList=True}"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource categoryViewSource}">
        <DataGrid x:Name="categoryDataGrid" AutoGenerateColumns="False" EnableRowVirtualization="True"
                    ItemsSource="{Binding}" Margin="13,13,43,191"
                    RowDetailsVisibilityMode="VisibleWhenSelected">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="categoryIdColumn" Binding="{Binding CategoryId}"
                                    Header="Category Id" Width="SizeToHeader"/>
                <DataGridTextColumn x:Name="nameColumn" Binding="{Binding Name}"
                                    Header="Name" Width="SizeToHeader"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

Ajout d’une grille Détails

Maintenant que nous avons une grille pour afficher les catégories, nous allons ajouter une grille de détails pour afficher les produits associés.

  • Sélectionnez la propriété Products sous la source de données Category et faites-la glisser sur le formulaire.
    • La ressource categoryProductsViewSource et la grille productDataGrid sont ajoutées au code XAML
    • Le chemin de liaison de cette ressource est défini sur Products
    • L’infrastructure de liaison de données WPF garantit que seuls les produits liés à la catégorie sélectionnée s’affichent dans productDataGrid
  • À partir de la boîte à outils, faites glisser le bouton vers le formulaire. Définissez la propriété Name sur buttonSave et la propriété Content sur Save.

Le formulaire doit ressembler à ceci :

Formulaire du concepteur

Ajouter du code qui gère l’interaction des données

Il est temps d’ajouter des gestionnaires d’événements à la fenêtre principale.

  • Dans la fenêtre XAML, cliquez sur l’élément <Window , ce qui sélectionne la fenêtre principale

  • Dans la fenêtre Propriétés , choisissez Événements en haut à droite, puis double-cliquez sur la zone de texte à droite de l’étiquette chargée .

    Propriétés de la fenêtre principale

  • Ajoutez également l’événement Click pour le bouton Enregistrer en double-cliquant sur le bouton Enregistrer dans le concepteur.

Cela vous amène au code-behind du formulaire, nous allons maintenant modifier le code pour utiliser ProductContext pour effectuer l’accès aux données. Mettez à jour le code de MainWindow comme indiqué ci-dessous.

Le code déclare une instance longue de ProductContext. L’objet ProductContext est utilisé pour interroger et enregistrer des données dans la base de données. L’instance Dispose() sur l’instance ProductContext est ensuite appelée à partir de la méthode OnClosing substituée. Les commentaires de code fournissent des détails sur ce que fait le code.

    using System.Data.Entity;
    using System.Linq;
    using System.Windows;

    namespace WPFwithEFSample
    {
        public partial class MainWindow : Window
        {
            private ProductContext _context = new ProductContext();
            public MainWindow()
            {
                InitializeComponent();
            }

            private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                System.Windows.Data.CollectionViewSource categoryViewSource =
                    ((System.Windows.Data.CollectionViewSource)(this.FindResource("categoryViewSource")));

                // Load is an extension method on IQueryable,
                // defined in the System.Data.Entity namespace.
                // This method enumerates the results of the query,
                // similar to ToList but without creating a list.
                // When used with Linq to Entities this method
                // creates entity objects and adds them to the context.
                _context.Categories.Load();

                // After the data is loaded call the DbSet<T>.Local property
                // to use the DbSet<T> as a binding source.
                categoryViewSource.Source = _context.Categories.Local;
            }

            private void buttonSave_Click(object sender, RoutedEventArgs e)
            {
                // When you delete an object from the related entities collection
                // (in this case Products), the Entity Framework doesn’t mark
                // these child entities as deleted.
                // Instead, it removes the relationship between the parent and the child
                // by setting the parent reference to null.
                // So we manually have to delete the products
                // that have a Category reference set to null.

                // The following code uses LINQ to Objects
                // against the Local collection of Products.
                // The ToList call is required because otherwise the collection will be modified
                // by the Remove call while it is being enumerated.
                // In most other situations you can use LINQ to Objects directly
                // against the Local property without using ToList first.
                foreach (var product in _context.Products.Local.ToList())
                {
                    if (product.Category == null)
                    {
                        _context.Products.Remove(product);
                    }
                }

                _context.SaveChanges();
                // Refresh the grids so the database generated values show up.
                this.categoryDataGrid.Items.Refresh();
                this.productsDataGrid.Items.Refresh();
            }

            protected override void OnClosing(System.ComponentModel.CancelEventArgs e)
            {
                base.OnClosing(e);
                this._context.Dispose();
            }
        }

    }

Tester l’application WPF

  • Compilez et exécutez l'application. Si vous avez utilisé Code First, vous verrez qu’une base de données WPFwithEFSample.ProductContext est créée pour vous.

  • Entrez un nom de catégorie dans la grille supérieure et les noms de produits dans la grille inférieure . N’entrez rien dans les colonnes ID, car la clé primaire est générée par la base de données

    Fenêtre principale avec de nouvelles catégories et produits

  • Appuyez sur le bouton Enregistrer pour enregistrer les données dans la base de données

Après l’appel à SaveChanges() de DbContext, les ID sont remplis avec les valeurs générées par la base de données. Étant donné que nous avons appelé Refresh() après SaveChanges() les contrôles DataGrid sont également mis à jour avec les nouvelles valeurs.

Fenêtre principale avec ID renseignés

Ressources supplémentaires

Pour en savoir plus sur la liaison de données aux regroupements à l’aide de WPF, consultez cette rubrique dans la documentation WPF.