Utilisation d'images avec le contrôle TreeView

Article
10/22/2014

Mise à jour : novembre 2007

Le contrôle TreeView peut prendre de nombreuses apparences différentes, en fournissant une personnalisation d'image flexible ainsi que des propriétés qui spécifient des options d'interface utilisateur personnalisées. Vous pouvez utiliser des images avec le contrôle TreeView pour représenter des nœuds, des lignes de connexion ainsi que les icônes de développement et de réduction. Vous pouvez également utiliser un jeu prédéfini d'images de la propriété ImageSet ou des images personnalisées en définissant les propriétés d'image individuelles.

Images utilisées dans le contrôle TreeView

Les éléments visuels d'un contrôle TreeView incluent les éléments suivants :

Images de nœud réduit
Images de nœud développé
Images non extensibles
Images de nœud racine
Images de nœud parent
Images de nœud feuille

En plus de ces images, le contrôle TreeView utilise également des images pour créer des lignes qui connectent des éléments TreeView lorsque la propriété ShowLines a la valeur true. Vous pouvez générer ces lignes à l'aide de la boîte de dialogue Générateur d'images de ligne disponible sur le contrôle TreeView (lorsque la propriété Afficher les lignes est vérifiée), ou vous pouvez créer les images vous-même. Notez que vous n'avez pas besoin de personnaliser chaque propriété d'image. Si une propriété d'image n'est pas définie explicitement, l'image par défaut intégrée est utilisée.

Utilisation des images par défaut dans un ensemble d'images

La façon la plus simple d'assigner des images à un contrôle TreeView consiste à utiliser la propriété ImageSet. L'ensemble d'images qui est intégré au contrôle TreeView inclut des ensembles de ressources d'images courants dans les arborescences utilisées avec MSN Messenger, Microsoft Outlook, l'Explorateur Windows et l'aide de Microsoft Windows. Les ensembles incluent également plusieurs styles de listes à puces.

L'exemple de code suivant illustre un contrôle TreeView qui utilise l'ensemble d'images de l'Explorateur de fichiers Windows XP.

        <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1" 
        ImageSet= "XPFileExplorer">

Pour obtenir la liste complète et la description des ensembles d'images disponibles pour le contrôle TreeView, consultez la propriété ImageSet.

Utilisation des images de développement et de réduction personnalisées

Vous pouvez utiliser des images pour indiquer un nœud extensible, un nœud réductible ou un nœud qui ne se développe pas ou ne se réduit pas. Vous pouvez créer des images à cet effet dans la plupart des programmes graphiques.

Pour assigner une image à un type de nœud particulier, vous assignez l'emplacement du fichier image à utiliser à la propriété correspondante. Ces propriétés incluent ExpandImageUrl, CollapseImageUrl et NoExpandImageUrl. L'exemple suivant affecte à ces propriétés des images personnalisées du répertoire Images du site Web.

    <asp:TreeView ID="TreeView1" 
         
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

Notez que vous pouvez désactiver le rendu des images de développement et de réduction en affectant la valeur false à la propriété ShowExpandCollapse.

Utilisation d'images personnalisées pour les nœuds racine, parent et feuille

Chaque contrôle TreeView peut être constitué de nœuds racine, parent et feuille. Un nœud racine est tout nœud qui a des nœuds enfants et dont la propriété Parent a la valeur null ; il s'agit du nœud de niveau supérieur dans l'arborescence. Un nœud parent est tout nœud dans la collection de nœuds du contrôle TreeView qui a des nœuds enfants sous lui dans la hiérarchie. Un nœud feuille est tout nœud dans la collection de nœuds du contrôle TreeView qui n'a pas de nœuds enfants ; ce n'est ni un nœud racine ni un nœud parent.

Le contrôle TreeView expose des styles de propriété pour les trois types de TreeNode : nœuds racine, parent et feuille. Ce sont les propriétés RootNodeStyle, ParentNodeStyle et LeafNodeStyle, respectivement. Chaque propriété peut être utilisée pour définir une valeur ImageUrl pour une propriété appliquée à ce type de nœud. Ces images sont rendues à la gauche du texte de nœud. Chaque type de TreeNode peut substituer de façon sélective l'image par défaut à son type de nœud à l'aide de la propriété ImageUrl.

L'exemple suivant montre comment assigner des propriétés.

<asp:TreeView ID="TreeView1"  DataSourceID="XmlDataSource1" >
        <RootNodeStyle ImageUrl="~/Images/root.gif" />
        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
    </asp:TreeView>

L'exemple suivant montre comment substituer l'image de style de nœud spécifiée à un nœud d'arbre unique. Notez qu'en cas de rendu, le nœud d'arbre "Page 2" aurait une étoile (Star.gif) comme image de nœud au lieu de l'image assignée à l'aide de la propriété LeafNodeStyle.

      <asp:TreeView id="SampleTreeView" 
        >
          <RootNodeStyle ImageUrl="~/Images/root.gif" />
          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
        <Nodes>
          <asp:TreeNode Value="Home" 
            Text="Home"
            Target="Content" 
            Expanded="True">
            <asp:TreeNode Value="Page 1" 
              Text="Page1"
              Target="Content">
              <asp:TreeNode Value="Section 1" 
                Text="Section 1"
                Target="Content"/>
            </asp:TreeNode>              
            <asp:TreeNode Value="Page 2" 
              Text="Page 2"
              Target="Content"
                ImageUrl="~/Images/star.gif">
            </asp:TreeNode> 
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>

Utilisation des images de ligne

Le contrôle TreeView peut restituer des lignes qui connectent des nœuds d'arbre à une série d'images rendues au préalable. Le contrôle rend ces lignes lorsque la propriété ShowLines a la valeur true. Vous pouvez modifier l'apparence de ces images de ligne à l'aide du Générateur d'images de ligne dans le menu contextuel du contrôle TreeView ou assigner des images personnalisées à chacune de ces fonctions de ligne vous-même.

Remarque :
Les outils de design visuel, tels que Visual Studio 2005, incluent souvent des utilitaires pour générer automatiquement les images de ligne.

Le contrôle TreeView utilise une convention d'affectation de noms spécifique pour les 16 images différentes qui composent les lignes utilisées pour connecter des nœuds d'arbre. Le tableau suivant affiche le nom de fichier et la description de chacune des images utilisées pour constituer les connexions de ligne.

Nom de fichier	Image	Description
Dash.gif		Image de ligne affichée à côté du nœud racine lorsqu'il n'existe qu'un seul nœud racine dans l'arborescence et que ce nœud racine est une feuille.
Dashminus.gif		Image de signe moins (-) affichée à côté du nœud racine lorsqu'il n'existe qu'un seul nœud racine dans l'arborescence pour indiquer que le nœud racine est développé.
Dashplus.gif		Image de signe plus (-) affichée à côté du nœud racine lorsqu'il n'existe qu'un seul nœud racine dans l'arborescence pour indiquer que le nœud racine est réduit.
I.gif		Image de ligne affichée pour connecter des nœuds adjacents.
L.gif		Image de ligne affichée à côté du dernier nœud dans une branche lorsque le nœud est une feuille.
Lminus.gif		Image de ligne affichée à côté du dernier nœud dans une branche pour indiquer que le nœud est développé.
Lplus.gif		Image de ligne affichée à côté du dernier nœud dans une branche pour indiquer que le nœud est réduit.
Minus.gif		Image de signe moins affichée à côté du premier nœud racine dans une arborescence qui contient plusieurs nœuds racine pour indiquer que le nœud est développé. Cette image ne contient pas de ligne supplémentaire et s'affiche uniquement après que le nœud racine a été réduit une fois. Lorsque la page est chargée pour la première fois, l'image Rminus.gif est affichée.
Noexpand.gif		Image d'espacement vide affichée à côté d'un nœud feuille. Cette image permet l'alignement vertical du texte.
Plus.gif		Image de signe plus affichée à côté du premier nœud racine dans une arborescence qui contient plusieurs nœuds racine pour indiquer que le nœud est réduit. Cette image ne contient pas de ligne supplémentaire et s'affiche uniquement après que le nœud racine a été développé une fois. Lorsque la page est chargée pour la première fois, l'image Rplus.gif est affichée.
R.gif		Image de ligne affichée à côté du premier nœud racine dans une arborescence qui contient plusieurs nœuds racine pour indiquer que le nœud est un nœud feuille.
Rminus.gif		Image de signe moins affichée à côté du premier nœud racine dans une arborescence qui contient plusieurs nœuds racine pour indiquer que le nœud est développé. Cette image contient une ligne supplémentaire et s'affiche uniquement lorsque la page est chargée pour la première fois. Après que le nœud racine a été réduit une fois, l'image Minus.gif s'affiche.
Rplus.gif		Image de signe plus affichée à côté du premier nœud racine dans une arborescence qui contient plusieurs nœuds racine pour indiquer que le nœud est réduit. Cette image contient une ligne supplémentaire et s'affiche uniquement lorsque la page est chargée pour la première fois. Après que le nœud racine a été développé une fois, l'image Plus.gif s'affiche.
T.gif		Image de ligne affichée à côté d'un nœud au milieu de l'arborescence (au niveau d'une intersection en forme de T) pour indiquer que le nœud est une feuille.
Tminus.gif		Image de signe moins affichée à côté d'un nœud au milieu de l'arborescence (au niveau d'une intersection en forme de T) pour indiquer que le nœud est développé.
Tplus.gif		Image de signe plus affichée à côté d'un nœud au milieu de l'arborescence (au niveau d'une intersection en forme de T) pour indiquer que le nœud est réduit.

Lorsque vous utilisez le Générateur d'images de ligne, le contrôle crée les images et les stocke dans un dossier par défaut appelé TreeLineImages. Vous pouvez changer le nom de ce dossier ainsi que modifier les images générées par le Générateur d'images de ligne. Si vous créez des images personnalisées, nommez-les en utilisant les mêmes conventions d'affectation de noms que dans le tableau ci-dessus. Pour vous aider à créer des images personnalisées, vous pouvez utiliser le Générateur d'images de ligne pour créer des images que vous pouvez ensuite modifier et personnaliser.