ASP.NET Tree. ExpertTree - XML and CSS based DHTML Server-Side Tree Control for ASP.NET

<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<%@ Register TagPrefix="etd" TagName="ColorPicker" Src="../Controls/ColorPicker.ascx" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<%@ Control Language="c#" AutoEventWireup="false" %>
<table cellpadding="0" cellspacing="0" border="0" xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
  <tr>
    <td valign=top>
<ec:ExpertTree id="CustomNodesTree" runat="server" ExpandOnClick="true" CollapseOnClick="True">
<TreeLook Width="260px" Height="460px" Overflow="Scroll" />
<Looks>
  <ec:TreeNodeLook Id="Parent" BindStrategy="AutoBind" SubTree-Expand-Effect="GlideTopToBottom" SubTree-Expand-Duration="400" SubTree-Collapse-Effect="GlideTopToBottom" SubTree-Collapse-Duration="400">
    <InitLook ExpandButton-Width="11px" ExpandButton-Height="11px" ExpandButton-ImageResourceUrl="XP.ExpandButton.gif">
      <NodeIcon Width="16px" Height="16px" Padding-Left="3px" Padding-Right="3px" />
      <TextSection Cursor="Default" ForeColor="Black" Padding-Left="5px" Padding-Top="2px" Padding-Right="5px" Padding-Bottom="2px" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" />
    </InitLook>
    <HoveredLook>
      <TextSection ForeColor="#000066" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Font-Decoration="Underline" />
    </HoveredLook>
    <ExpandedLook ExpandButton-Width="11px" ExpandButton-Height="11px" ExpandButton-ImageResourceUrl="XP.CollapseButton.gif" />
    <DisabledLook TextSection-ForeColor="Gray" />
    <SelectedLook>
      <TextSection ForeColor="White" Border-Style="Dotted" Border-Width="1px" Border-Color="#CE953A" Padding-Left="4px" Padding-Top="1px" Padding-Right="4px" Padding-Bottom="1px" Background-Color="#2060C0" />
    </SelectedLook>
    <SelectedHoveredLook>
      <TextSection ForeColor="White" Border-Style="Dotted" Border-Width="1px" Border-Color="#CE953A" Padding-Left="4px" Padding-Top="1px" Padding-Right="4px" Padding-Bottom="1px" Background-Color="#2060C0" Font-Name="Tahoma,Verdana,Arial" Font-Size="12px" Font-Decoration="Underline" />
    </SelectedHoveredLook>
  </ec:TreeNodeLook>
  <ec:TreeNodeLook Id="TemplatedNode" SubTree-Expand-Effect="GlideTopToBottom" SubTree-Expand-Duration="400" SubTree-Collapse-Effect="GlideTopToBottom" SubTree-Collapse-Duration="400">
    <InitLook ExpandButton-Width="11px" ExpandButton-Height="11px" ExpandButton-ImageResourceUrl="XP.ExpandButton.gif" />
    <ExpandedLook ExpandButton-Width="11px" ExpandButton-Height="11px" ExpandButton-ImageResourceUrl="XP.CollapseButton.gif" />
    <SelectedLook  />
  </ec:TreeNodeLook>
  <ec:TemplateLook Id="CalendarTemplate">
    <LookTemplate>
  <table cellpadding="0" cellspacing="0" border="0" class="Calendar">
    <tr>
      <td>
        <asp:calendar id="Calendar1" runat="server" SelectedDate="<%#DateTime.Today%>" DayNameFormat="FirstTwoLetters" CssClass="Calendar" selecteddaystyle-backcolor="silver" style="border-color:white;" width="140" PrevMonthText="<<" NextMonthText=">>">
          <TitleStyle CssClass="CalendarTitle" BackColor="#D7D7E5"></TitleStyle>
          <SelectedDayStyle BackColor="#FBE694" ForeColor="#000000" BorderWidth="1px" BorderColor="#BB5503" Font-Bold="true"></SelectedDayStyle>
          <DayHeaderStyle Font-Bold="True"></DayHeaderStyle>
          <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle>
        </asp:calendar>
      </td>
    </tr>
  </table>
      </LookTemplate>
  </ec:TemplateLook>
</Looks>

<Nodes>
  <ec:TreeNode Text="Desktop" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/Desktop.gif">
    <Nodes>
      <ec:TreeNode Text="My Documents" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyDocuments.gif">
        <Nodes>
          <ec:TreeNode Text="My Pictures" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif" />
          <ec:TreeNode Text="My Music" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyMusic.gif" />
          <ec:TreeNode Text="My Background" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyPictures.gif">
            <Nodes>
              <ec:TreeNode Value="Gold">
                <Look Base="TemplatedNode">
                  <InitLook>
                    <TemplateLook Id="ColorPickerTemplate">
                      <LookTemplate>
<etd:ColorPicker runat="server" SelectedColor='<%#DataBinder.Eval(Container.DataObject, "Value")%>' />                              
                        </LookTemplate>
                    </TemplateLook>
                  </InitLook>
                </Look>
              </ec:TreeNode>
            </Nodes>
          </ec:TreeNode>
        </Nodes>
      </ec:TreeNode>
      <ec:TreeNode Text="My Computer" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/MyComputer.gif">
        <Nodes>
          <ec:TreeNode Text="31/2 Floppy (A:)">
            <Look InitLook-NodeIcon-ImageUrl="../images/Explorer/FloppyDrive.gif" />
          </ec:TreeNode>
          <ec:TreeNode Text="Local Disk (C:)" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/LocalDrive.gif" />
          <ec:TreeNode Text="New Volume (D:)" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/LocalDrive.gif" />
        </Nodes>
      </ec:TreeNode>
      <ec:TreeNode Text="Control Panel" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ControlPanel.gif">
        <Nodes>
          <ec:TreeNode Text="Administrative Tools" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/AdminTools.gif" />
          <ec:TreeNode Text="Fonts" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/Fonts.gif" />
          <ec:TreeNode Text="Network Connections" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/NetworkConn.gif" />
          <ec:TreeNode Text="Printers And Faxes" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/PrintersAndFaxes.gif" />
          <ec:TreeNode Text="Scanners And Cameras" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ScannersAndCameras.gif" />
          <ec:TreeNode Text="Scheduled Tasks" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/ScheduledTasks.gif" />
          <ec:TreeNode Text="Calendar" Expanded="True" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/Calendar.gif">
            <Nodes>
              <ec:TreeNode Look-Base="TemplatedNode" Look-InitLook-TemplateLook-Base="CalendarTemplate" />
            </Nodes>
          </ec:TreeNode>
        </Nodes>
      </ec:TreeNode>
      <ec:TreeNode Text="Recycle Bin" Look-InitLook-NodeIcon-ImageUrl="../images/Explorer/RecycleBin.gif" />
    </Nodes>
  </ec:TreeNode>
</Nodes>
</ec:ExpertTree>      
    </td>  
    <td valign=top >
<ecd:DescriptionView runat="server" ID="Descriptionview1">
<ecd:Description id="Description3" runat="server">
This demo shows using <b>TemplateLooks</b>. <b>TemplateLook</b> is a look that 
can contain arbitrary content within its template.
  </ecd:Description>
<ecd:Description id="Description4" runat="server">
You can put any HTML, Web controls, User controls inside a <b>TemplateLook</b>'s template.
  </ecd:Description>
<ecd:Description id="Description5" runat="server">
Use a <b>TemplateLook</b> instead of <b>TextLook</b> in a <b>TreeNodeLook</b>.
  </ecd:Description>
<ecd:Description id="Description7" runat="server">
You can use databind expressions inside a template.
  </ecd:Description>
<ecd:Description id="Description8" runat="server">
Use API to handle a number of server-side events that are raised by TemplateLooks 
and command controls inside them, and access controls inside templates.
  </ecd:Description>
</ecd:DescriptionView>  
    </td>
  </tr>
</table>

<ec:CodeViewTab id="CodeViewTab1" runat="server">
  <ec:TabItem runat="server" Text="aspx" ID="Tabitem1">
    <pre class="aspcode">
<ecd:SyntaxHighlight runat="server" ContentType="ASPX" OutputFile="Advanced/TemplateNodes.ascx" />
    </pre>
  </ec:TabItem>    
</ec:CodeViewTab>