Controls You Can Use on Web Forms ASP.NET Navigation Controls TreeView Control
The TreeView control exposes several properties for customizing the visual rendering of the control. These properties are applied in the order listed below:
- properties that apply to the TreeView control as a whole
- properties that apply to specific node levels
- properties that apply to specific node types
- properties that apply to individual nodes
A quick way to alter the appearance of the TreeView is to specify the ImageSet to use for the control. You can either:
- select from a predefined set of system images to give the control a standard look;
- or define your own custom set.
The example below shows how to set the ImageSet property at design time.
<asp:treeview id="myTreeView" runat="server"
datasourceid="siteMap"
imageset="XPFileExplorer"
showlines="true"
expanddepth=1 />
<asp:sitemapdatasource id="siteMap" runat="server" />
Show me
The below example illustrates the effects of applying the available system image sets. 
Show me
When defining a custom set of images, you can specify images for the different parts of the control by setting properties shown in the following table.
| Image property |
Description |
| CollapseImageUrl |
The URL to an image displayed for the collapsible node indicator. This image is usually a minus sign (-). |
| ExpandImageUrl |
The URL to an image displayed for the expandable node indicator. This image is usually a plus sign (+). |
| LineImagesFolder |
The URL to the folder containing the line images used to connect parent nodes to child nodes. The ShowLines property must also be set to true for this property to have an effect. |
| NoExpandImageUrl |
The URL to an image displayed for the non-expandable node indicator. |
NOTE: You do not need to customize every image property. If an image property is not explicitly set, the built-in default image is used.
Another way to alter the appearance of the control is to set the style properties for the specific node types. The following table lists the available node styles you can specify for the TreeView.
You can also control the style of nodes at specific depths within the tree by using the LevelStyles collection. The first style in the collection corresponds to the style of the nodes at the first level in the tree. The second style in the collection corresponds to the style of the nodes at the second level in the tree, and so on. This is most often used to generate table of contents–style navigation menus where nodes at a certain depth should have the same appearance, regardless of whether they have child nodes.
NOTE: If a style is defined for a certain depth level using the LevelStyles collection, that style overrides any root, parent, or leaf node style settings for the nodes at that depth.
The TreeView control also allows you to display a check box next to a node. When the ShowCheckBoxes property is set to a value other than TreeNodeTypes.None, check boxes are displayed next to the specified node types.
NOTE: The ShowCheckBoxes property can be set to a bitwise combination of the TreeNodeTypes enumeration member values.
Each time the page is posted to the server, the CheckedNodes collection is automatically populated with the selected nodes. When check boxes are displayed, you can use the TreeNodeCheckChanged event to run a custom routine whenever the state of a check box changes between posts to the server.
The TreeView also exposes properties to set the appearance of two specific nodes.
| Node style property |
Description |
| HoverNodeStyle |
The style settings for a node when the mouse pointer is positioned over it. |
| SelectedNodeStyle |
The style settings for a selected node. |
Responding to TreeView Node Events Web Forms Server Controls and CSS Styles