TreeView.LineImagesFolder Property
Definition
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Gets or sets the path to a folder that contains the line images that are used to connect child nodes to parent nodes.
public:
property System::String ^ LineImagesFolder { System::String ^ get(); void set(System::String ^ value); };public string LineImagesFolder { get; set; }member this.LineImagesFolder : string with get, setPublic Property LineImagesFolder As StringProperty Value
The path to a folder that contains the line images used to connect nodes. The default is an empty string (""), which indicates that the LineImagesFolder property is not set.
Examples
The following code example demonstrates how to use the LineImagesFolder property to specify the folder that contains the line images to display in the TreeView control. To work with this example, use the Line Designer tool beforehand to create a set of line images. Place them in a folder named LineImages within the directory for the sample application.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TreeView LineImagesFolderUrl Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>TreeView LineImagesFolderUrl Example</h3>
<asp:TreeView id="LinksTreeView"
LineImagesFolder="~\LineImages"
ShowLines="true"
runat="server">
<Nodes>
<asp:TreeNode Text="Table of Contents"
SelectAction="None">
<asp:TreeNode Text="Chapter One">
<asp:TreeNode Text="Section 1.0">
<asp:TreeNode Text="Topic 1.0.1"/>
<asp:TreeNode Text="Topic 1.0.2"/>
<asp:TreeNode Text="Topic 1.0.3"/>
</asp:TreeNode>
<asp:TreeNode Text="Section 1.1">
<asp:TreeNode Text="Topic 1.1.1"/>
<asp:TreeNode Text="Topic 1.1.2"/>
<asp:TreeNode Text="Topic 1.1.3"/>
<asp:TreeNode Text="Topic 1.1.4"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Chapter Two">
<asp:TreeNode Text="Section 2.0">
<asp:TreeNode Text="Topic 2.0.1"/>
<asp:TreeNode Text="Topic 2.0.2"/>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Appendix A" />
<asp:TreeNode Text="Appendix B" />
<asp:TreeNode Text="Appendix C" />
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TreeView LineImagesFolderUrl Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>TreeView LineImagesFolderUrl Example</h3>
<asp:TreeView id="LinksTreeView"
LineImagesFolder="~\LineImages"
ShowLines="true"
runat="server">
<Nodes>
<asp:TreeNode Text="Table of Contents"
SelectAction="None">
<asp:TreeNode Text="Chapter One">
<asp:TreeNode Text="Section 1.0">
<asp:TreeNode Text="Topic 1.0.1"/>
<asp:TreeNode Text="Topic 1.0.2"/>
<asp:TreeNode Text="Topic 1.0.3"/>
</asp:TreeNode>
<asp:TreeNode Text="Section 1.1">
<asp:TreeNode Text="Topic 1.1.1"/>
<asp:TreeNode Text="Topic 1.1.2"/>
<asp:TreeNode Text="Topic 1.1.3"/>
<asp:TreeNode Text="Topic 1.1.4"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Chapter Two">
<asp:TreeNode Text="Section 2.0">
<asp:TreeNode Text="Topic 2.0.1"/>
<asp:TreeNode Text="Topic 2.0.2"/>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Appendix A" />
<asp:TreeNode Text="Appendix B" />
<asp:TreeNode Text="Appendix C" />
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
Remarks
The TreeView control can display lines that connect child nodes to parent nodes when the ShowLines property is set to true. When lines are displayed, use the LineImagesFolder property to specify a Web-accessible folder that contains the set of pre-rendered images to use for the lines. The following table describes the images that are used by the TreeView control.
| 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 the 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. |
Note
If the LineImagesFolder property is not set, the TreeView control will use the built-in, default images (20 x 20 pixels).
Some visual designers, such as Microsoft Visual Studio, provide tools to generate the line images.
The run time does not flip custom images for right-to-left displays. To support both left-to-right and right-to-left Web pages, you must create image sets for both directions.
The value of this property is stored in view state.
