asp.net - How to use custom image in a TreeView

Custom images in a TreeView

The TreeView is an ASP.NET web server control. The TreeView is located under System.Web.UI.WebControls namespace. TreeView web server control displays hierarchical data. Such as a table of contents in a tree structure.

The following ASP.NET C# tutorial code demonstrates how we can use custom images in a TreeView web server control. The asp.net c# developers can alter the appearance of the control to customize the images that are displayed in the TreeView control.

The ASP.NET C# developers can specify their own custom set of images for the different parts of the TreeView control by setting the CollapseImageUrl, ExpandImageUrl, LineImagesFolder, and NoExpandImageUrl properties.

The TreeView CollapseImageUrl property is the URL to an image displayed for the collapsible node indicator. This image is usually a minus sign (-). The ExpandImageUrl is the URL to an image displayed for the expandable node indicator. This image is usually a plus sign (+).

TreeViewCustomImage.aspx


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use custom image in TreeView Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Red">TreeView Example: Using Custom Image</h2>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:TreeView 
             ID="TreeView1" 
             runat="server"
             DataSourceID="SiteMapDataSource1"
             ExpandImageUrl="~/Images/Expand.jpg"
             CollapseImageUrl="~/Images/Collapse.jpg"
             LeafNodeStyle-ImageUrl="~/Images/Leaf.jpg"
             >
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

Web.sitemap


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Home" description="Home Page">
    <siteMapNode url="~/Design.aspx" title="Design"  description="Design Tools">
      <siteMapNode url="~/Photoshop.aspx" title="Photoshop"  description="Adobe Photoshop" />
      <siteMapNode url="~/Firaworks.aspx" title="Firaworks"  description="Adobe Firaworks" />
    </siteMapNode>
    <siteMapNode url="~/Development.aspx" title="Development"  description="Development Tools">
      <siteMapNode url="~/ColdFusion.aspx" title="ColdFusion"  description="Adobe ColdFusion" />
      <siteMapNode url="~/aspnet.aspx" title="asp.net"  description="Microsoft asp.net" />
    </siteMapNode>
  </siteMapNode>    
</siteMap>