Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Utiliser le contrôle DataGrid

Le contrôle DataGrid permet d’afficher une collection de données dans plusieurs colonnes et lignes. Il comprend une fonctionnalité de tri par colonnes.

Pour plus d'informations sur le contrôle DataGrid, consultez la page Classe DataGrid (System.Windows.Controls) sur MSDN.

Vous pouvez utiliser n’importe quel type de données dans le contrôle DataGrid. Si vous ne disposez pas encore de données que vous pouvez utiliser dans la procédure « Pour remplir un contrôle DataGrid », suivez cette procédure pour configurer un exemple de données qui illustrera pleinement les fonctions du contrôle DataGrid.

Pour créer un exemple de données à afficher dans un contrôle DataGrid

  1. Si le panneau Données n’est pas affiché, dans le menu Fenêtre, cliquez sur Données.

  2. Dans le panneau Données, cliquez sur Créer des exemples de données JJ170738.30540d76-7256-43ce-b5d9-4b2edf3d339f(fr-fr,VS.120).png, puis cliquez sur Nouvel exemple de données.

  3. Dans la boîte de dialogue Nouvel exemple de données, vous pouvez modifier le nom par défaut de l’ensemble de données, puis sélectionner la partie de votre projet pour laquelle vous souhaitez rendre les données disponibles.

  4. Activez la case Activer l'exemple de données lorsque l'application s'exécute.

    Conseil Conseil

    La boîte de dialogue Activer l'exemple de données lorsque l'application s'exécute permet à votre projet d'afficher l'exemple de données lorsque vous exécutez votre application. Lorsque cette case n'est pas activée, Blend for Visual Studio affiche l'exemple de données uniquement sur la planche graphique.

    Pour plus d'informations, consultez Afficher un exemple de données dans votre application lorsqu'elle s'exécute.

  5. Cliquez sur OK.

    Une source d’exemples de données comprenant une collection JJ170738.B4_Data_CollectionIdentifier(fr-fr,VS.120).png de propriétés (chaîne JJ170738.0baebca0-a722-4aa2-ad58-a96325a0536d(fr-fr,VS.120).png et Booléen JJ170738.b09651ed-c8ae-4f66-b10c-d8478c5337c7(fr-fr,VS.120).png) est créée.

    JJ170738.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(fr-fr,VS.120).png

    Pour explorer complètement les caractéristiques de l’exemple de données et du contrôle DataGrid, ajoutez une propriété d’image à la collection.

  6. En regard de Collection JJ170738.B4_Data_CollectionIdentifier(fr-fr,VS.120).png, cliquez sur Ajouter une simple propriété JJ170738.203a14a5-0db2-486e-9b94-4fdf658d531b(fr-fr,VS.120).png pour ajouter une nouvelle propriété à la collection.

    Conseil Conseil

    Cliquez sur la flèche déroulante en regard du bouton Ajouter une propriété simple JJ170738.203a14a5-0db2-486e-9b94-4fdf658d531b(fr-fr,VS.120).png pour sélectionner différents types de propriétés à ajouter : simple, complexe et collection.

  7. En regard de la nouvelle propriété, cliquez sur click Changer le type de la propriété JJ170738.c4968582-0dae-407e-961b-80ffa2838f3b(fr-fr,VS.120).png. Dans l'éditeur qui apparaît, cliquez sur la flèche déroulante en regard de Type, puis cliquez sur Image.

  8. Cliquez n'importe où en dehors de l'éditeur pour le fermer.

Vous disposez maintenant d’un exemple de collection de données prêt à s’afficher dans un contrôle DataGrid.

Pour plus d'informations sur la modification d'un exemple de données et l'ajout de nouvelles propriétés de données, voir Modifier un exemple de données.

Il existe de nombreux moyens de lier des données à un contrôle sur la planche graphique. La procédure suivante présente le moyen le plus rapide lorsque vous utilisez un contrôle DataGrid.

Pour d'autres options, voir Lier un objet à des données.

Pour remplir un contrôle DataGrid

  1. Dans le panneau Outils, cliquez sur Composants JJ170738.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.120).png.

    Conseil Conseil

    Vous pouvez aussi afficher le panneau Composants dans un panneau ancré en cliquant sur Composants dans le menu Fenêtre.

  2. Dans le panneau Composants, développez Contrôles, cliquez sur Tous, puis cliquez sur le contrôle DataGrid JJ170738.55bfb0df-05d2-4b58-8312-24a3aed103e3(fr-fr,VS.120).png.

    Le bouton situé sous Composants JJ170738.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.120).png dans le panneau Outils affiche l’icône du contrôle DataGrid et est sélectionné.

  3. À l’aide de votre souris, dessinez un objet DataGrid volumineux sur la planche graphique dans votre document principal.

  4. Dans le panneau Données, faites glisser l'exemple de collection de données (JJ170738.B4_Data_CollectionIdentifier(fr-fr,VS.120).png Collection) sur le nouvel objet DataGrid.

    L'objet DataGrid affiche la collection dans l'exemple de source de données, convertissant les propriétés de l'image en objets image, et les propriétés booléennes en cases à cocher.

  5. Appuyez sur la touche F5 pour exécuter votre application.

    Si vous utilisez l'exemple de données de la procédure précédente et que vous avez activé l'exemple de données lors du test de votre application, vous devriez voir les éléments suivants :

    JJ170738.c5466ecc-fe83-4d23-96c0-ca058daa29d0(fr-fr,VS.120).png
    Conseil Conseil

    Pour mettre à jour un objet DataGrid sur la planche graphique après avoir modifié l’exemple de données qu’il affiche, vous pouvez faire glisser des propriétés individuelles sur le contrôle pour ajouter des colonnes, ou faire glisser à nouveau toute la collection. Dans le panneau Objets et chronologie, vous pouvez développer le nœud Colonnes de l’objet DataGrid pour supprimer et réorganiser les colonnes.

Lorsque vous faites glisser une collection de données sur un contrôle DataGrid, les étiquettes des colonnes sont définies en fonction du nom des propriétés. Vous pouvez cependant modifier les étiquettes des colonnes après avoir rempli le contrôle DataGrid.

Pour modifier les étiquettes des colonnes dans un contrôle DataGrid

  1. Dans le panneau Objets et chronologie, développez l’objet [DataGrid] pour faire apparaître les objets de colonne.

  2. Sélectionnez le premier objet de colonne ([DataGridTemplateColumn] "Property1"). Dans le panneau Propriétés, en regard de la propriété Header, entrez un nom descriptif, tel que Description puis appuyez sur Entrée.

  3. Sélectionnez les deux autres objets de colonne et modifiez leur nom.

  4. Appuyez sur la touche F5 pour exécuter votre application.

    Si vous utilisez l'exemple de données de la procédure précédente et que vous avez activé l'exemple de données lors du test de votre application, vous devriez voir un affichage du type suivant :

    JJ170738.749194f0-94df-4ceb-bdcb-30b35c6ae56b(fr-fr,VS.120).png

Vous pouvez modifier l'aspect des contrôles en modifiant leurs propriétés ou en modifiant les modèles qui sont utilisés pour les styliser. Vous pouvez modifier l'ensemble du modèle, un modèle de ligne vide et les modèles appliqués aux cellules individuelles, aux modèles d'en-tête, etc.

Pour plus d'informations, consultez Créer ou modifier un modèle dans Blend.

Pour modifier l’apparence des en-têtes de colonne

  1. Dans le panneau Objets et chronologie ou dans la planche graphique, cliquez avec le bouton droit sur l’objet DataGrid, pointez sur Modifier des modèles associés, sur Modifier ColumnHeaderStyle, puis cliquez sur Modifier une copie.

    JJ170738.976995f7-d28e-4af7-8bba-4b1555eaff54(fr-fr,VS.120).png
  2. Dans la boîte de dialogue Créer une ressource de style, cliquez sur OK.

    Blend passe en mode d'édition de modèle. Le chemin de navigation situé en haut de la planche graphique indique que vous éditez un modèle à l’intérieur de l’objet DataGrid.

  3. Dans le panneau Objets et chronologie, ajoutez d'autres objets au modèle ou modifiez les propriétés des objets existants dans le panneau Propriétés. Par exemple, dans l’objet [Grid], il existe un tracé nommé SortIcon qui représente l’icône d’un bouton de tri. Vous pouvez le transformer en image ou modifier le tracé. Le bouton de tri apparaît lorsque vous exécutez votre application et cliquez sur un en-tête de colonne.

    Conseil Conseil

    Certaines propriétés peuvent être englobées dans un rectangle jaune pour indiquer qu'elles sont liées à des données ou à des propriétés du contrôle qui utilise le modèle (liaison de modèle).

    Pour plus d’informations sur la liaison de modèle, voir Application de styles à des objets dans Blend.

Pour modifier l'apparence des cellules contenant des images

  1. Dans la planche graphique, cliquez avec le bouton droit sur une cellule de l'objet DataGrid qui affiche une image, pointez sur Modifier les en-têtes de colonne, pointez sur Modifier CellTemplate, puis cliquez sur Modifier l'élément actuel.

  2. Dans le panneau Objets et chronologie, ajoutez d’autres objets au conteneur de disposition [StackPanel] (tel qu’un symbole de copyright) ou sélectionnez l’objet [Image] et modifiez ses propriétés dans le panneau Propriétés.

    Les changements que vous effectuez affectent toutes les cellules qui contiennent des images.

Pour modifier les couleurs d'une ligne sur deux

  1. Dans le panneau Objets et chronologie, sélectionnez l’objet [DataGrid].

  2. Dans le panneau Propriétés, sous Lignes, cliquez dans le rectangle en regard de la propriété AlternatingRowBackground.

    Un éditeur de pinceaux apparaît.

  3. Sélectionnez un type de pinceau en cliquant sur l'un des onglets en haut du sélecteur de couleurs. Si vous utilisez le pinceau existant (Pinceau de couleur unie JJ170738.b62aabb4-fad4-4a9b-a84c-16c98012cf27(fr-fr,VS.120).png) et modifiez sa couleur, veillez à augmenter la propriété Alpha afin que la couleur ne soit pas transparente.

  4. Vous pouvez modifier la couleur des autres lignes en modifiant la propriété RowBackground.

    Pour plus d’informations sur la modification des pinceaux, voir Définition de couleurs, de pinceaux et de masques dans Blend.

Afficher: