Customizing the Look and Feel of the TreeView Web Server Control
The rendering of the TreeView control is fully customizable, which allows for a wide range of display styles.
To customize the look and feel of the TreeView control, you can do the following:
Specify properties of the TreeView control that affect the control display and rendering.
Specify an ImageSet property that selects a set of built-in images to render with the control at run time.
Specify individual image and style properties that control display and rendering characteristics of specific groups of TreeNode objects within the TreeView control.
Use the AutoFormat feature of Visual Studio to customize a set of image and style properties all at once.
Assign a predefined theme or a skin that defines the display and rendering characteristics at run time for TreeView controls in an application.
Top-Level Layout Properties
In addition to standard server control properties, such as the BackColor property, the TreeView control exposes a set of properties that that give precise control over the appearance of the TreeView control.
The NodeIndent Property
The NodeIndent property specifies the indentation level for all nodes. Nodes are indented from the side on which the TreeView control is rendered. This is the left side for locales that render from left to right, and it is the right side for locales that render from right to left.
The NodeWrap Property
The NodeWrap property specifies whether the text displayed in each node wraps to the beginning of the next line or continues on the same line when it runs out of space.
The ShowLines Property
The ShowLines property specifies whether lines connecting child nodes to parent nodes are displayed. When this property is set to true, the TreeView control searches the Web-accessible folder specified by the LineImagesFolder property for the line images.
TreeNodeStyle Properties
In addition to its own properties, the TreeView control supports properties of the TreeNodeStyle control for each node type. These style properties override the NodeStyle property, which applies to all node types.
The TreeView control also has a NodeIndent property that specifies the indentation level for all nodes. Nodes are indented from the side on which the TreeView control is rendered. This is the left side for locales that render from left to right, and it is the right side for locales that render from right to left.
A node can also have a different style applied when it is selected or when the mouse hovers over the node. When the Selected property of a node is set to true, the SelectedNodeStyle property is applied, which overrides any unselected style properties for the selected node. When the mouse hovers over a node, the HoverNodeStyle property is applied. The following image and table describe the TreeNodeStyle properties.
TreeNodeStyle Properties
.gif "TreeView Node style graphic")
| Node property | Description |
|---|---|
Specifies the amount of vertical spacing between the entire current node and adjacent nodes above and below. |
|
Specifies the amount of space rendered on the top and bottom of the TreeNode text. |
|
Specifies the amount space rendered on the left and right of the TreeNode text. |
|
Specifies the amount of space above and below the child nodes of the TreeNode. |
|
Specifies the path to the image that displays next to the TreeNode. |
The Level Styles Collection
The LevelStyles collection is an alternative to setting the individual style properties, such as the NodeStyle property. The LevelStyles collection controls the style of nodes at specific levels of the tree. The first style in the collection corresponds to the style of nodes in the first level of the tree. The second style in the collection corresponds to the style of nodes in the second level of the tree, and so on. This property is most often used to generate table of contents-style navigation menus where nodes at a certain level should have the same appearance, regardless of whether they have child nodes.
.gif "Note") Note |
|---|
If a style is defined for a certain level using the LevelStyles collection, then it overrides any root-, parent-, or leaf-node style settings for the nodes at that level. |
Style Precedence
Style properties are applied in the following order of precedence:
NodeStyle
RootNodeStyle, ParentNodeStyle, or LeafNodeStyle, depending on the node type. If the LevelStyles collection is defined, it is applied at this time, overriding the other node style properties.
SelectedNodeStyle
HoverNodeStyle
AutoFormat
If you are using a visual design tool, such as Visual Web Developer, the TreeView control exposes an AutoFormat feature. The AutoFormat feature applies a set of display properties to the control at design time. These property settings override any previously set property values and can be modified in the code designer.
In addition to standard style attributes, AutoFormat also sets the ImageSet property to be one of available sets of images that are included with the TreeView control. By using AutoFormat, you can quickly change the appearance of the TreeView control to mimic other well-known custom trees, such as the following:
Outlook Inbox folder
Microsoft Windows file system
MSN Messenger contact list
Outlook Express newsgroups list
MSDN table of contents
Windows Help table of contents
Frequently asked questions (FAQs)
Windows Event List view
In addition to the common tree styles, the AutoFormat feature includes a number of stylized bulleted lists.
While AutoFormat is useful for applying a set of properties to a single control, you can use themes and skins to apply the same look and feel to multiple TreeView controls within your Web site. For more information, see ASP.NET Themes and Skins Overview.
Image Properties
Unlike most controls, the TreeView control benefits from the ability to apply a set of graphic resources to the control. Images are used to represent nodes, expand and collapse buttons, and connecting lines.
You can set images at the TreeView level by setting the ImageSet property or creating custom images and setting the individual image properties. You can also set images at the TreeNode level to customize the appearance of the TreeView control even further.
Image Sets
The TreeView control includes built-in sets of image resources that are the same images using in many common trees. The following table shows some of the common image sets that you might use.
| ImageSet name | Description |
|---|---|
TreeViewImageSet.Contacts |
MSN Messenger images |
TreeViewImageSet.Faq |
FAQ-style images |
TreeViewImageSet.Inbox |
Outlook Inbox images |
TreeViewImageSet.News |
Outlook Express newsgroup images |
TreeViewImageSet.Help |
Microsoft Windows Help system images |
TreeViewImageSet.XPFileExplorer |
Microsoft Windows XP file explorer images |
Custom Images and Lines
In addition to using built-in image resources, you can define your own custom set of image resources for the TreeView control. To use a custom set of images, you must create two types of images. The first are node images that show an expandable node, a collapsible node, and a node that does not expand or collapse. These images can be created in a program such as Microsoft Paint. If you are using lines to connect the nodes, you must create a set of line images and set the ShowLines property to true. If you are using a visual designer such as Visual Web Developer, you can use the Line Image Creator tool to create line images. If not, you must create them manually using a program, such as Microsoft Paint.
Once you have created your node images, place them in a directory in your Web site, and then set the following properties on your TreeView control to reference the images:
Additionally, the line images must be placed in a folder and then the LineImagesFolder property must be set to point to the folder of your line images.
For more information about the ImageSet property and a complete listing of available image sets, see ImageSet.
For more information about line images and a list of all the TreeView control images, see LineImagesFolder.
Themes and Skins
Themes and skins provide an easy way to apply a set of properties to multiple controls within a Web site. For example, if you create a theme called MyTheme and you define a skin within that theme called MyTreeView skin, then you can define that skin one time and apply it to many TreeView controls.
For more information, see ASP.NET Themes and Skins Overview.