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, voir DataGrid Class (System.Windows.Controls) dans MSDN.

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

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.

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 Ajouter un exemple de source de données , puis cliquez sur Définir un nouvel exemple de données.

3. Dans la boîte de dialogue Définir un 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 :

   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, Microsoft Expression Blend affiche l'exemple de données uniquement sur la planche graphique. Pour plus d’informations, voir 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  de trois types de propriétés (chaîne , numéro , et Booléen ) est créée.

   

   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 , cliquez sur Ajouter une propriété simple  pour ajouter une nouvelle propriété à la collection.

   Conseil :
   Vous pouvez cliquer sur la flèche déroulante en regard du bouton Ajouter une propriété simple  pour sélectionner différents types de propriétés à ajouter : simple, complexe et collection.

7. En regard de la nouvelle propriété (Property4), cliquez sur Changer le type de la propriété . 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.

   L'icône en regard de Property4 est mise à jour pour l'identifier en tant que propriété d'image .

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.

Pour remplir un contrôle DataGrid

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.

1. Dans le panneau Outils, cliquez sur Composants.

   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 .

   Le bouton situé sous Composants dans le panneau Outils affiche l'icône du contrôle DataGrid et est sélectionné.

3. A l'aide de votre souris, dessinez un gros objet DataGrid sur la planche graphique dans votre document principal.

4. Dans le panneau Données, faites glisser l'exemple de collection de données ( 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 :

   

   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.

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

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.

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é En-tête, 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 :

   

Modifiez l'aspect du contrôle DataGrid

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, voir Créer ou modifier un modèle.

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 d’autres modèles, sur Modifier ColumnHeaderStyle, puis cliquez sur Modifier une copie.

   

2. Dans la boîte de dialogue Créer une ressource de style, cliquez sur OK.

   Expression Blend passe en mode d'édition de modèle. Le chemin de défilement 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 :
   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 Définition d'un style pour un contrôle prenant en charge les modèles.

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 property.

   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 ) 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.

Voir aussi

Autres ressources

Création d'un échantillon de données

Connexion aux données réelles

Affichage de données dans des contrôles