Using Images with the TreeView Control

Article
12/04/2014

The TreeView control is capable of many different appearances, providing flexible image customization as well as properties that specify custom user interface (UI) options. You can use images with the TreeView control to represent nodes, connecting lines, and the expand and collapse icons. You can also use a predefined set of images from the ImageSet property, or use custom images by setting the individual image properties.

Images Used in the TreeView Control

The visual elements of a TreeView control include the following:

Collapsed node images
Expanded node images
Not expandable images
Root node images
Parent node images
Leaf node images

In addition to these images, the TreeView control also uses images to create lines that connect TreeView items when the ShowLines property is set to true. You can generate these lines using the Line Image Generator dialog box available on the TreeView control (when the Show Lines property is checked), or you can create the images yourself. Note that you do not need to customize every image property. If an image property is not explicitly set, the built-in default image is used.

Using the Default Images in an Image Set

The easiest way to assign images to a TreeView control is by using the ImageSet property. The image set that is built into the TreeView control includes sets of image resources common in trees used with MSN Messenger, Microsoft Outlook, Windows Explorer and Microsoft Windows Help. The sets also include several bulleted list styles.

The following code example shows a TreeView control that uses the Windows XP file explorer image set.

        <asp:TreeView ID="TreeView1" 
        runat="server" 
        DataSourceID="XmlDataSource1" 
        ImageSet= "XPFileExplorer">

For a complete list and description of the image sets available for the TreeView control, see the ImageSet property.

Using Custom Collapse and Expand Images

You can use images to indicate an expandable node, a collapsible node, or a node that does not expand or collapse. You can create images for this purpose in most graphics programs.

To assign an image to a particular node type, you assign the location of the image file to be used to the corresponding property. These properties include ExpandImageUrl, CollapseImageUrl, and NoExpandImageUrl. The following example sets these properties to custom images in the Images directory of the Web site.

    <asp:TreeView ID="TreeView1" 
        runat="server" 
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

Note that you can turn off the rendering of the expand and collapse images by setting the ShowExpandCollapse property to false.

Using Custom Images for Root, Parent, and Leaf Nodes

Each TreeView control can consist of root, parent, and leaf nodes. A root node is any node that has child nodes and has its Parent property set to null; it is the top-level node in the tree. A parent node is any node in the TreeView control's node collection that has child nodes underneath it in the hierarchy. A leaf node is any node in the TreeView control's node collection that has no child nodes; it is neither a root node nor a parent node.

The TreeView control exposes property styles for the three TreeNode types: root, parent, and leaf nodes. These are the RootNodeStyle, ParentNodeStyle, and LeafNodeStyle properties, respectively. Each property can be used to define an ImageUrl value for a property applied to that node type. These images are rendered to the left of the node text. Each TreeNode type can selectively override the default image for its node type using the ImageUrl property.

The following example shows how to assign properties.

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" >
        <RootNodeStyle ImageUrl="~/Images/root.gif" />
        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
    </asp:TreeView>

The following example shows how to override the specified node-style image for a single tree node. Note that when rendered, the tree node "Page 2" would have a star (Star.gif) as the node image instead of the image assigned using the LeafNodeStyle property.

      <asp:TreeView id="SampleTreeView" 
        runat="server">
          <RootNodeStyle ImageUrl="~/Images/root.gif" />
          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
        <Nodes>
          <asp:TreeNode Value="Home" 
            Text="Home"
            Target="Content" 
            Expanded="True">
            <asp:TreeNode Value="Page 1" 
              Text="Page1"
              Target="Content">
              <asp:TreeNode Value="Section 1" 
                Text="Section 1"
                Target="Content"/>
            </asp:TreeNode>              
            <asp:TreeNode Value="Page 2" 
              Text="Page 2"
              Target="Content"
                ImageUrl="~/Images/star.gif">
            </asp:TreeNode> 
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>

Using Line Images

The TreeView control can render lines that connect tree nodes with a series of prerendered images. The control renders these lines when the ShowLines property is set to true. You can edit the appearance of these line images using the Line Image Generator on the TreeView control's shortcut menu, or you can assign custom images to each of these line features yourself.

Note

Visual design tools such as Visual Studio 2005 often include utilities for generating the line images automatically.

The TreeView control uses a specific naming convention for the 16 different images that make up the lines used to connect tree nodes. The following table shows the file name and description for each of the images used to make up the line connections.

File name	Image	Description
Dash.gif		A line image displayed next to the root node when there is only one root node in the tree structure and that root node is a leaf.
Dashminus.gif		A minus sign (-) image displayed next to the root node when there is only one root node in the tree structure to indicate that the root node is expanded.
Dashplus.gif		A plus sign (+) image displayed next to the root node when there is only one root node in the tree structure to indicate that the root node is collapsed.
I.gif		A line image displayed to connect adjacent nodes.
L.gif		A line image displayed next to the last node in a branch when the node is a leaf.
Lminus.gif		A line image displayed next to the last node in a branch to indicate that the node is expanded.
Lplus.gif		A line image displayed next to the last node in a branch to indicate that the node is collapsed.
Minus.gif		A minus sign image displayed next to the first root node in a tree structure that contains multiple root nodes to indicate that the node is expanded. This image does not contain an extra line and is displayed only after the root node has been collapsed once. When the page is first loaded, the Rminus.gif image is displayed.
Noexpand.gif		A blank spacer image displayed next to a leaf node. This image allows text to line up vertically.
Plus.gif		A plus sign image displayed next to the first root node in a tree structure that contains multiple root nodes to indicate that the node is collapsed. This image does not contain an extra line and is displayed only after the root node has been expanded once. When the page is first loaded, the Rplus.gif image is displayed.
R.gif		A line image displayed next to the first root node in a tree structure that contains multiple root nodes to indicate that the node is a leaf node.
Rminus.gif		A minus sign image displayed next to the first root node in a tree structure that contains multiple root nodes to indicate that the node is expanded. This image contains an extra line and is displayed only when the page is first loaded. After the root node has been collapsed once, the Minus.gif image is displayed.
Rplus.gif		A plus sign image displayed next to the first root node in a tree structure that contains multiple root nodes to indicate that the node is collapsed. This image contains an extra line and is displayed only when the page is first loaded. After the root node has been expanded once, the Plus.gif image is displayed.
T.gif		A line image displayed next to a node in the middle of the tree structure (at a T-intersection) to indicate that the node is a leaf.
Tminus.gif		A minus sign image displayed next to a node in the middle of the tree structure (at a T-intersection) to indicate that the node is expanded.
Tplus.gif		A plus sign image displayed next to a node in the middle of the tree structure (at a T-intersection) to indicate that the node is collapsed.

When you use the Line Image Generator, the control creates the images and stores them in a default folder called TreeLineImages. You can change the name of this folder, as well as edit the images generated by the Line Image Generator. If you create custom images, name them using the same naming conventions as in the table above. To assist you in creating custom images, you can use the Line Image Generator to create images you can then edit and customize.

Using Images with the TreeView Control

Images Used in the TreeView Control

Using the Default Images in an Image Set

Using Custom Collapse and Expand Images

Using Custom Images for Root, Parent, and Leaf Nodes

Using Line Images

See Also

Reference

Concepts

Additional resources