Utiliser le contrôle TreeView

Le contrôle TreeView permet d’afficher une collection de données hiérarchique (ou imbriquée, ou récursive) dans un arbre présentant des nœuds extensibles.

Pour plus d’informations sur le contrôle TreeView , voir TreeView, classe (System.Windows.Controls)  sur MSDN.

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

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

1. Si le panneau Données n'est pas encore affiché, cliquez sur le menu Fenêtre, puis sur Données.

2. Dans le panneau Données, cliquez sur Créer des exemples de données , 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 :

   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.

   

6. En regard de  Collection, cliquez sur la flèche déroulante à côté de Ajouter une propriété simple , puis cliquez sur Convertir en collection hiérarchique.

   Lorsqu’une collection plate est convertie en collections imbriquées, elle fournit des propriétés qui sont imbriquées sur cinq niveaux. Le nom de la collection de deuxième niveau devient modifiable.

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

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 le contrôle TreeView

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

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

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

3. A l’aide de votre pointeur, dessinez un gros objet TreeView sur la planche graphique dans votre document principal.

4. Dans le panneau Données, faites glisser la collection de premier niveau ( Collection) sur le nouvel objet TreeView .

   L’objet TreeView 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 :

   

Modifiez l'aspect du contrôle TreeView

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 le modèle général, les modèles qui organisent les éléments dans chaque ligne, etc.

Pour plus d’informations, voir Créer ou modifier un modèle.

Pour modifier la disposition et l'aspect des éléments dans chaque ligne

1. Dans le panneau Objets et chronologie ou dans la planche graphique, cliquez avec le bouton droit sur l’objet TreeView , pointez sur Modifier d’autres modèles, sur Modifier Contenu généré (ItemTemplate), puis cliquez sur Modifier une copie.

2. Dans la boîte de dialogue Créer une ressource de modèle de données, cliquez sur OK.

   Expression 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 TreeView . Vous pouvez utiliser le chemin de navigation pour quitter le mode d’édition de modèle en cliquant sur le bouton TreeView .

3. Dans le panneau Objets et chronologie, vous pouvez voir que les éléments sont disposés dans un objet StackPanel . Vous pouvez modifier l'orientation et l'ordre d'empilement. Vous pouvez également remplacer l’objet StackPanel par un panneau de disposition différent, tel que le panneau de disposition Grid ou Canvas .

   Pour plus d’informations, voir les rubriques suivantes :

   • Modifier l’orientation de l’empilement

   • Modifier l’ordre d’empilement

   • Modifier le type d’un panneau de disposition existant

   • Organisation des objets

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

Pour modifier la couleur de l'élément sélectionné

1. Dans le panneau Objets et chronologie ou dans la planche graphique, cliquez avec le bouton droit sur l’objet TreeView , pointez sur Modifier d’autres modèles, sur Modifier le conteneur de l’élément généré (ItemContainerStyle), 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 navigation situé en haut de la planche graphique indique que vous éditez un modèle à l’intérieur de l’objet TreeView . Vous pouvez utiliser le chemin de navigation pour quitter le mode d’édition de modèle en cliquant sur le bouton TreeView .

   Conseil :

   La première fois que vous accédez au mode d'édition de modèle, l'aspect de votre modèle reflète l'aspect du contrôle lorsqu'il n'y a pas d'interaction avec le contrôle. Pour modifier l'aspect du contrôle lorsqu'un utilisateur intervient, vous devez sélectionner un déclencheur (dans les projets Windows Presentation Foundation [WPF]) ou un état (dans les projets Microsoft Silverlight) en mode d'édition de modèle. Par exemple, lorsque les utilisateurs sélectionnent un élément dans un contrôle TreeView , ils interagissent avec le contrôle et provoquent la survenue d’un événement Selected . Pour modifier l’aspect du contrôle lorsqu’un élément est sélectionné, vous devez modifier le modèle pendant que le déclencheur ou l’état correspondant à l’événement Selected est sélectionné.

3. Effectuez l’une des opérations suivantes :

   • Pour un projet WPF : Dans le panneau Déclencheurs, cliquez sur le déclencheur IsSelected = True pour accéder au mode d’édition de modèle pour l’événement Selected . Dans le panneau Objets et chronologie, cliquez sur l’objet Bd . Dans le panneau Propriétés, sous Pinceaux, modifiez la couleur Arrière-plan de l’objet Bd . Lorsque vous avez terminé, cliquez sur Par défaut dans le panneau Déclencheurs pour désactiver l'enregistrement de déclencheur.

   • Pour un projet Silverlight : Dans le panneau États, cliquez sur l’état Selected pour accéder au mode d’édition de modèle pour l’événement Selected . Dans le panneau Objets et chronologie, cliquez sur l’objet Selection . Dans le panneau Propriétés, sous Pinceaux, modifiez les couleurs Remplissage et Trait de l’objet Selection . Lorsque vous avez terminé, cliquez sur Base dans le panneau États pour désactiver l'enregistrement d'état.

   Pour plus d’informations sur l'ouverture des panneaux, voir Ajouter ou supprimer un panneau de l'espace de travail.

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

4. Appuyez sur F5 pour exécuter votre application et sélectionner un élément dans l'arborescence.

Pour modifier l'aspect du bouton de développement

1. Dans le panneau Objets et chronologie ou dans la planche graphique, cliquez avec le bouton droit sur l’objet TreeView , pointez sur Modifier d’autres modèles, sur Modifier le conteneur de l’élément généré (ItemContainerStyle), puis cliquez sur Modifier une copie.

   Conseil :
   Si vous avez déjà créé ce modèle, la commande Modifier l'élément actuel sera activée et vous pourrez la sélectionner plutôt que la commande 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 navigation situé en haut de la planche graphique indique que vous éditez un modèle à l’intérieur de l’objet TreeView . Vous pouvez utiliser le chemin de navigation pour quitter le mode d’édition de modèle en cliquant sur le bouton [TreeView] .

3. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’objet Expander (WPF) ou l’objet ExpandButton (projets Silverlight), pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle actif.

4. Dans le panneau Objets et chronologie, développez les nœuds pour voir l’objet Path qui représente le bouton de développement du contrôle TreeView . Dans les projets WPF, l’objet tracé est nommé ExpandPath . Dans les projets Silverlight, deux objets tracé sont présents, nommés UncheckedVisual et CheckedVisual . Vous pouvez utiliser les outils Plume  et Sélection directe  pour modifier la forme de ces tracés. Dans les projets WPF, le nom et le type de l’objet ExpandPath doivent être préservés car des déclencheurs en dépendent.

   Pour plus d’informations, voir Utilisation de déclencheurs pour la définition du comportement d'un contrôle WPF.

   Dans les projets Silverlight, vous pouvez modifier l’aspect des changements des objets tracé dans l’état Checked afin de pouvoir modifier ce changement.

   Pour plus d’informations, voir Définition d'états visuels différents pour un contrôle.

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

Copyright © 2011 Microsoft Corporation. Tous droits réservés.