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)
Node property | Description |
|---|
NodeSpacing | Specifies the amount of vertical spacing between the entire current node and adjacent nodes above and below. |
VerticalPadding | Specifies the amount of space rendered on the top and bottom of the TreeNode text. |
HorizontalPadding | Specifies the amount space rendered on the left and right of the TreeNode text. |
ChildNodesPadding | Specifies the amount of space above and below the child nodes of the TreeNode. |
ImageUrl | 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: |
|---|
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
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.