How to manage the TreeView control appearance in ASP.NET

If you want to manage appearance of the TreeView control in your project you can use its style model. Styles are represented by the TreeNodeStyle class, which derives from Style class. As with other rich controls, the styles give you options to set background and foreground colors, fonts, and borders. The next table lists the node-specific properties which belong to the TreeNodeStyle class:

 

Property

Description

ImageUrlThe URL for the image shown next to the node.
NodeSpacingThe space (in pixels) between the current node and the node above and below.
VerticalPadding

The space (in pixels) between the top and bottom of the node text and border around the text.

HorizontalPaddingThe space (in pixels) between the left and right of the node text and border around the text.
ChildNodesPadding

The space (in pixels) between the last child node of an expanded parent node and the following sibling node.

 

Because a TreeView is rendered using an HTML table, you can set the padding of various elements to control the spacing around text, between nodes, and so on. You can use also the TreeView.NodeIndent to set the number of pixels of indentation (from the left) in each subsequent level of the tree hierarchy. The next picture shows how these settings apply to a single node:

TreeView node spacing

TreeView node spacing

You can configure some of the TreeView internal rendering through its higher-level properties:

1. Turn off the node lines in a tree using the TreeView.ShowExpandCollapse property.

2. Set the collapsed and expanded indicators of the TreeView (usually represented by plus and minus icons) using the CollapseImageUrl and ExpandImageUrl properties.

3. Set what’s displayed next to nodes that have no children using the NoExpandImageUrl property.

4. Show check boxes next to every node setting the TreeView.ShowCheckBoxes property to true.

5. Show check boxes next to individual nodes setting the TreeNode.ShowCheckBox property to true.

6. Determine if a given node is checked by examining the TreeNode.Checked property.