<%@ Control %>
<%@ Register TagPrefix="ecd" Namespace="ASPNETExpert.WebControls.DemoControls" Assembly="ASPNETExpert.WebControls.DemoControls" %>
<%@ Register TagPrefix="ec" Namespace="ASPNETExpert.WebControls" Assembly="ASPNETExpert.WebControls" %>
<table cellpadding="0" cellspacing="5" border="0" width="100%" xmlns:ec="urn:http://aspnetexpert.com/ExpertControls.xsd">
<tr>
<td valign="top">
<ec:ExpertTree id="TextOnlyTree" runat="server" EnableViewState="False" ExpandOnClick="true" CollapseOnClick="True">
<TreeLook NodeSpacing="14" Padding-All="5px" Background-Color="#738CDE" />
<Looks>
<ec:TreeNodeLook Id="TopNode" Extent="FullRow">
<InitLook RowLook-Cursor="Pointer" RowLook-Background-ImageUrl="../images/XPPanel/TopNodeBackground.gif">
<LeftIcon Width="13px" Height="25px" ImageUrl="../images/XPPanel/TopNodeLeftIcon.gif" />
<RightIcon Width="26px" Height="25px" ImageUrl="../images/XPPanel/TopNodeRightIconExpand.gif" />
<TextSection ForeColor="#2163C6" Wrap="False" Padding-Right="7px" Font-Name="Tahoma,Verdana,Arial"
Font-Size="12px" Font-Bold="True" />
</InitLook>
<ExpandedLook RightIcon-Width="26px" RightIcon-Height="25px" RightIcon-ImageUrl="../images/XPPanel/TopNodeRightIconCollapse.gif" />
<SubTree NodeSpacing="2" Padding-Top="6px" Padding-Bottom="10px" Background-Color="#EFEFFF"
Expand-Effect="GlideTopToBottom" Collapse-Effect="GlideTopToBottom" />
<BindCriteria>
<ec:PropertyValueCriteria Property="HasChildren" Value="true" />
</BindCriteria>
</ec:TreeNodeLook>
<ec:TreeNodeLook Id="Node">
<InitLook NodeIcon-Width="16px" NodeIcon-Height="16px" NodeIcon-Cursor="Pointer">
<TextSection Cursor="Pointer" ForeColor="#2163C6" Padding-Left="6px" Padding-Top="2px" Padding-Bottom="4px"
Font-Name="Tahoma,Verdana,Arial" Font-Size="11px" />
</InitLook>
<HoveredLook>
<TextSection ForeColor="#5797F6" Font-Name="Tahoma,Verdana,Arial" Font-Size="11px" Font-Decoration="Underline" />
</HoveredLook>
<SelectedLook>
<TextSection ForeColor="#3777D6" Font-Name="Tahoma,Verdana,Arial" Font-Size="11px" Font-Bold="True" />
</SelectedLook>
<SelectedHoveredLook>
<TextSection ForeColor="#5797F6" Font-Name="Tahoma,Verdana,Arial" Font-Size="11px" Font-Bold="True"
Font-Decoration="Underline" />
</SelectedHoveredLook>
<BindCriteria>
<ec:PropertyValueCriteria Property="HasChildren" Value="false" />
</BindCriteria>
</ec:TreeNodeLook>
</Looks>
<Nodes>
<ec:TreeNode Text="Music Tasks" Expanded="True" SelectOnClick="False">
<Nodes>
<ec:TreeNode Text="Play Selection" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Play.gif" />
<ec:TreeNode Text="Shop for music online" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Shop.gif" />
<ec:TreeNode Text="Copy to audio CD" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Copy.gif" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Text="File and Folder Tasks" Expanded="True" SelectOnClick="False">
<Look SubTree-Expand-Effect="GradientWipeDown" SubTree-Collapse-Effect="GradientWipeUp" />
<Nodes>
<ec:TreeNode Text="Rename this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Rename.gif" />
<ec:TreeNode Text="Move this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Move.gif" />
<ec:TreeNode Text="Copy this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/CopyFolder.gif" />
<ec:TreeNode Text="Share this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Share.gif" />
<ec:TreeNode Text="E-mail this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Email.gif" />
<ec:TreeNode Text="Delete this folder" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/Delete.gif" />
</Nodes>
</ec:TreeNode>
<ec:TreeNode Text="Other Places" Expanded="True" SelectOnClick="False">
<Look SubTree-Expand-Effect="Pixelate" SubTree-Collapse-Effect="Fade" />
<Nodes>
<ec:TreeNode Text="My Documents" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/MyDocuments.gif" />
<ec:TreeNode Text="My Computer" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/MyComputer.gif" />
<ec:TreeNode Text="Mt Network Places" Look-InitLook-NodeIcon-ImageUrl="../images/XPPanel/MyNetworkPlaces.gif" />
</Nodes>
</ec:TreeNode>
</Nodes>
</ec:ExpertTree>
</td>
<td valign="top" width="100%">
<ecd:DescriptionView runat="server" ID="Descriptionview1">
<ecd:Description id="Description1" runat="server">
This example demonstrates using <b>ExpertTree</b> for creating panels in the style of Windows XP.
</ecd:Description>
<ecd:Description id="Description2" runat="server">
It combines a number of <b>Looks</b> and their properties to achieve the necessary panel look:
<ul>
<li class="exampledesclist">
Custom <b>Border</b> and <b>Background</b> for the whole tree and sub-trees.</li>
<li class="exampledesclist">
Different <b>NodeSpacing</b> for the whole tree and sub-trees.</li>
<li class="exampledesclist">
Custom <b>Background</b>, <b>LeftIcon</b>, <b>RightIcon</b> and text style for
top nodes.</li>
<li class="exampledesclist">
Custom <b>NodeIcon</b> and text style for sub-nodes.</li>
<li class="exampledesclist">
Various <b>Expand</b> and <b>Collapse</b> effects.</li>
</ul>
</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="Design/XPPanel.ascx" ID="Syntaxhighlight1"/>
</pre>
</ec:TabItem>
</ec:CodeViewTab>