ASP. NET uses images for the TreeView Control

The TreeView control has many different appearances, allowing you to flexibly customize images and specify attributes of Custom User Interface (UI) options. You can use images with the TreeView control to represent nodes, connections, and expand and collapse icons. You can also use a set of predefined images in the ImageSet attribute, or set image attributes to use custom images.

 

I. images used in the TreeView Control

The visualization elements of the TreeView control include the following images:

· Collapsed node Images

· Expanded node Images

· Non-expandable Images

· Root node Image

· Parent node Image

· Leaf node Image

 

In addition to these images, when the ShowLines attribute is set to true, the TreeView control also uses the image to create a line connecting the TreeView item. You can use the "Row icon generator" dialog box on the TreeView control to generate these lines (when the "display row" attribute is selected) or create an image by yourself. Note that you do not need to customize each image attribute. If you do not explicitly set image properties, use the built-in default image.

 

Ii. Use the default image in the Image Set

The easiest way to assign images to the TreeView control is to use the ImageSet attribute. Image sets built into the TreeView control include common image resource sets in the tree for MSN Messenger, Microsoft Outlook, Windows Explorer, and Microsoft Windows Help. The image set also includes several project symbol styles.

The following code example shows how to use the TreeView control in the image set of Windows xp file resource manager.

<Asp: TreeView ID = "TreeView1"

Runat = "server"

Performanceid = "xmlperformance1"

ImageSet = "XPFileExplorer">

 

3. Fold and expand images with custom settings

Images can be used to indicate nodes that can be expanded, foldable nodes, or nodes that do not expand or collapse. You can create images for this purpose in most graphics programs.

To assign an image to a specific node type, you can assign the location of the image file to be used for the corresponding attribute. These attributes include: ExpandImageUrl, CollapseImageUrl, and NoExpandImageUrl. The following example sets these attributes to customize Images in the Images directory of the website.

<Asp: TreeView ID = "TreeView1"

Runat = "server"

Performanceid = "xmlperformance1"

ExpandImageUrl = "~ /Images/ExpandAll.gif"

CollapseImageUrl = "~ /Images/CollapseAll.gif"

NoExpandImageUrl = "~ /Images/stop.gif ">

</Asp: TreeView>

Note that you can disable the show and collapse of images by setting the ShowExpandCollapse attribute to false.

 

4. Use custom images for root nodes, parent nodes, and leaf nodes

Each TreeView control can be composed of the root node, parent node, and leaf node. A root node is any node with a subnode and its Parent attribute is set to null. It is a top-level node in the tree. The parent node is any node with a child node under the hierarchy in the node set of the TreeView control. A leaf node is a node that does not have any child nodes in the node set of the TreeView control. It is neither a root node nor a parent node.

The TreeView control exposes three Property styles of the TreeNode type: root node, parent node, and leaf node. These styles are RootNodeStyle, ParentNodeStyle, and LeafNodeStyle attributes respectively. Each attribute can be used to define an ImageUrl value for the attribute applied to this node type. These images are displayed on the left side of the node text. By using the ImageUrl attribute, each TreeNode type can selectively override the default image of its node type.

 

The following example shows how to assign attributes.

<Asp: TreeView ID = "TreeView1" runat = "server" performanceid = "xmlperformance1">

<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 of a single tree node. Note that when rendering, the tree node "Page 2" uses the star number (Star.gif) as the node image instead of the image allocated using the LeafNodeStyle attribute as the node image.

<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>

 

5. Use line images

The TreeView control can be used to render lines that connect Tree nodes with a series of pre-rendered images. When the ShowLines property is set to true, the control presents these lines. You can use the "Row icon generator" on the shortcut menu of the TreeView control to edit the appearance of these line images, or assign custom images to each line feature.

(Visual design tools (such as Visual Studio 2005) usually include utility tools used to automatically generate line images.

The TreeView control applies specific naming conventions to 16 different images that form lines used to connect Tree nodes. The following table shows the names and descriptions of each image used to form a line connection.

File Name
Image
Description

Dash.gif

When there is only one root node in the tree structure and the root node is a leaf node, the line image next to the root node is displayed.

Dashminus.gif

When there is only one root node in the tree structure, it is displayed next to the root node to indicate that the root node has expanded the minus sign (-) image.

Dashplus.gif

When there is only one root node in the tree structure, it is displayed next to the root node to indicate that the root node has collapsed the plus sign (+) image.

I .gif

Connects the line images displayed by adjacent nodes.

L.gif

The line image shown next to a branch when the last node of a branch is a leaf node.

Lminus.gif

It is displayed next to the last node of a branch to indicate the expanded line image of the node.

Lplus.gif

It is displayed next to the last node of a branch to indicate the collapsed line image of the node.

Minus.gif

Displays the expanded minus sign image next to the first root node in the tree structure containing multiple root nodes. This image does not contain other lines and is displayed only after the root node is folded once. The first time you load the page, the Rminus.gif image is displayed.

Noexpand.gif

Blank interval image displayed next to the leaf node. This image allows text vertical