Personnalisation de l'apparence du contrôle serveur Web TreeView
Mise à jour : novembre 2007
L'affichage du contrôle TreeView est complètement personnalisable, ce qui donne lieu à un large éventail de styles d'affichage.
Pour personnaliser l'apparence du contrôle TreeView, procédez comme suit :
Spécifiez les propriétés du contrôle TreeView qui affecte l'affichage et le rendu de celui-ci.
Spécifiez une propriété ImageSet qui sélectionne un ensemble d'images intégrées à afficher avec le contrôle au moment de l'exécution.
Spécifiez les propriétés d'image et de style individuelles qui contrôlent l'affichage et les caractéristiques de rendu des groupes d'objets TreeNode spécifiques du contrôle TreeView.
Utilisez la fonction Mise en forme automatique de Visual Studio pour personnaliser un ensemble d'images et de propriétés de style en une seule fois.
Affectez un thème ou une apparence prédéfini qui définit l'affichage et les caractéristiques de rendu au moment de l'exécution des contrôles TreeView d'une application.
Propriétés de la disposition au niveau supérieur
Outre les propriétés des contrôles serveur standard, telles que la propriété BackColor, le contrôle TreeView affiche un ensemble de propriétés qui donne un contrôle précis de l'apparence du contrôle TreeView.
Propriété NodeIndent
La propriété NodeIndent spécifie le niveau de mise en retrait de tous les nœuds. Les nœuds sont mis en retrait par rapport au côté sur lequel le contrôle TreeView est restitué. Il s'agit du côté gauche pour les paramètres régionaux qui restituent de gauche à droite, et du côté droit pour les paramètres régionaux qui restituent de droite à gauche.
Propriété NodeWrap
La propriété NodeWrap spécifie si le texte affiché dans chaque nœud est renvoyé au début de la ligne suivante ou continue sur la même ligne lorsqu'il manque d'espace.
Propriété ShowLines
La propriété ShowLines spécifie si les lignes qui connectent les nœuds enfants aux nœuds parents sont affichées. Lorsque cette propriété a la valeur true, le contrôle TreeView recherche le dossier accessible par le Web spécifié par la propriété LineImagesFolder des images de ligne.
Propriétés TreeNodeStyle
En plus de ses propres propriétés, le contrôle TreeView prend en charge les propriétés du contrôle TreeNodeStyle de chaque type de nœud. Ces propriétés de style se substituent à la propriété NodeStyle qui s'applique à tous les types de nœud.
Le contrôle TreeView a également une propriété NodeIndent qui spécifie le niveau de mise en retrait de tous les nœuds. Les nœuds sont mis en retrait par rapport au côté sur lequel le contrôle TreeView est restitué. Il s'agit du côté gauche pour les paramètres régionaux qui restituent de gauche à droite, et du côté droit pour les paramètres régionaux qui restituent de droite à gauche.
Un style différent peut également s'appliquer au nœud lorsque ce dernier est sélectionné ou lorsque la souris pointe sur le nœud. Lorsque la valeur true est affectée à la propriété Selected d'un nœud, la propriété SelectedNodeStyle est appliquée, ce qui substitue les propriétés de style non sélectionnées du nœud sélectionné. Lorsque la souris pointe sur un nœud, la propriété HoverNodeStyle est appliquée. L'image et le tableau suivant décrivent les propriétés TreeNodeStyle.
Propriétés TreeNodeStyle
.gif)
Propriété de nœud |
Description |
|---|---|
Spécifie le montant d'espacement vertical entre le nœud actuel entier et les nœuds adjacents en dessus et en dessous. |
|
Spécifie la quantité d'espace affichée en haut et en bas du texte TreeNode. |
|
Spécifie la quantité d'espace affiché à gauche et à droit du texte TreeNode. |
|
Spécifie la quantité d'espace au-dessus et au-dessous des nœuds enfants du contrôle TreeNode. |
|
Spécifie le chemin d'accès à l'image qui s'affiche en regard du contrôle TreeNode. |
Collection de styles de niveau
La collection LevelStyles constitue un autre moyen de définir les propriétés de style individuelles, par exemple la propriété NodeStyle. La collection LevelStyles contrôle le style des nœuds à des niveaux spécifiques de l'arborescence. Le premier style de la collection correspond à celui des nœuds du premier niveau de l'arborescence. Le deuxième style de la collection correspond à celui des nœuds du deuxième niveau de l'arborescence, et ainsi de suite. Cette propriété est le plus souvent utilisée pour générer une table de menus de navigation de style de contenu où les nœuds d'un certain niveau doivent avoir la même apparence, qu'ils aient des nœuds enfants ou non.
.gif "Remarque") Remarque : |
|---|
Si un style est défini pour un certain niveau à l'aide de la collection LevelStyles, il se substitue aux paramètres de style de nœud racine, parent ou feuille des nœuds de ce niveau. |
Priorité de style
Les propriétés de style sont appliquées selon l'ordre de priorité suivant :
RootNodeStyle, ParentNodeStyle ou LeafNodeStyle, selon le type de nœud. Si la collection LevelStyles est définie, elle est alors appliquée et se substitue aux autres propriétés de style des nœuds.
Mise en forme automatique
Si vous utilisez un outil de conception visuel, tel que Visual Web Developer, le contrôle TreeView affiche une fonction Mise en forme automatique. La fonction Mise en forme automatique applique un ensemble de propriétés d'affichage au contrôle au moment du design. Ces paramètres de propriété se substituent à toutes les valeurs de propriété précédemment définies et peuvent être modifiés dans le concepteur de code.
Outre les attributs de style standard, la fonction Mise en forme automatique définit également la propriété ImageSet de sorte qu'elle soit l'un des ensembles d'images disponibles intégrés dans le contrôle TreeView. À l'aide de la fonction Mise en forme automatique, vous pouvez rapidement modifier l'apparence du contrôle TreeView pour reproduire d'autres arborescences personnalisées très courantes, par exemple :
Dossier Boîte de réception Outlook
Système de fichiers Microsoft Windows
Liste de contacts MSN Messenger
Liste de groupes de discussion Outlook Express
Table des matières MSDN
Table des matières Aide de Windows
Forum aux questions (FAQ)
Vue Liste des événements Windows
En plus de styles d'arborescence courants, la fonction Mise en forme automatique comprend plusieurs listes à puce stylisées.
Bien que la fonction Mise en forme automatique vous permette d'appliquer un ensemble de propriétés à un contrôle unique, vous pouvez utiliser les thèmes et les apparences pour appliquer la même apparence à de nombreux contrôles TreeView au sein de votre site Web. Pour plus d'informations, consultez Vue d'ensemble des thèmes et des apparences ASP.NET.
Propriétés d'image
Contrairement à la plupart des contrôles, le contrôle TreeView a la possibilité d'appliquer un ensemble de ressources graphiques au contrôle. Les images sont utilisées pour représenter des nœuds, développer et réduire des boutons et connecter des lignes.
Vous pouvez définir des images au niveau TreeView en définissant la propriété ImageSet ou en créant des images personnalisées et en définissant les propriétés d'image individuelles. Vous pouvez également définir des images au niveau TreeNode pour personnaliser davantage le contrôle TreeView.
Ensembles d'images
Le contrôle TreeView inclut des ensembles de ressources d'images intégrées identiques aux images utilisées dans plusieurs arborescences courantes. Le tableau suivant décrit quelques-uns des ensembles d'images courants que vous pouvez utiliser.
Nom ImageSet |
Description |
|---|---|
TreeViewImageSet.Contacts |
Images MSN Messenger |
TreeViewImageSet.Faq |
images de style FAQ |
TreeViewImageSet.Inbox |
Images de Boîte de réception Outlook |
TreeViewImageSet.News |
Images de groupe de discussion Outlook Express |
TreeViewImageSet.Help |
Images du système d'aide Microsoft Windows |
TreeViewImageSet.XPFileExplorer |
Images de l'explorateur de fichiers Microsoft Windows XP |
Images et lignes personnalisées
En plus d'utiliser des ressources d'images intégrées, vous pouvez définir vos propres ressources d'images personnalisées pour le contrôle TreeView. Pour utiliser un ensemble d'images personnalisé, vous devez créer deux types d'images. Les premières images constituent des images de nœud qui affichent un nœud extensible, un nœud réductible et un nœud fixe. Ces images peuvent être créées dans une application telle que Microsoft Paint. Si vous utilisez des lignes pour connecter les nœuds, vous devez créer un ensemble d'images de ligne et affecter la valeur true à la propriété ShowLines. Si vous utilisez un concepteur visuel tel que Visual Web Developer, vous pouvez utiliser l'outil Line Image Creator pour créer des images de ligne. Sinon, vous devez les créer manuellement à l'aide d'une application, par exemple Microsoft Paint.
Une fois que vous avez créé vos images de nœud, placez-les dans un répertoire de votre site Web, puis attribuez les propriétés suivantes à votre contrôle TreeView pour référencer les images :
En outre, les images de ligne doivent être placées dans un dossier et la propriété LineImagesFolder doit être configurée de sorte qu'il pointe sur le dossier de vos images de ligne.
Pour plus d'informations sur la propriété ImageSet et la liste complète des ensembles d'images disponibles, consultez ImageSet.
Pour plus d'informations sur les images de ligne et la liste de toutes les images du contrôle TreeView, consultez LineImagesFolder.
Thèmes et apparences
Les thèmes et les apparences permettent d'appliquer facilement un ensemble de propriétés à de nombreux contrôles d'un site Web. Par exemple, si vous créez un thème appelé MyTheme et que vous définissez une apparence dans ce thème appelé MyTreeView, vous pouvez définir cette apparence une seule fois et l'appliquer à de nombreux contrôles TreeView.
Pour plus d'informations, consultez Vue d'ensemble des thèmes et des apparences ASP.NET.