Highlighting the selected TreeNode

How can I highlight the selected TreeNode (UI.WebControls) in ASP.NET? The purpose is to let the user see which category he or she is viewing at the time.

My thought was that on each TreeNode, check if its property Selected was true and then change it's font or something to another color. I've read about setting the "ForeColor", but it doesn't seem to exist for this type of TreeNode.

Another thought was to add some sort of JavaScript to e开发者_如何学Pythonach Node.

Just as an example, this is what the code looks like today:

private void BuildTree()
    {
        TreeNode nodeNew = new TreeNode("Unread", MessageFolder.New.ToString());

        TreeNode nodeProcessed = new TreeNode("Read", MessageFolder.Processed.ToString());

        TreeViewFolders.Nodes.Add(nodeNew);
        TreeViewFolders.Nodes.Add(nodeProcessed);
    }

You have to work with the Server Control on the ASPX Page, you can specify the

<asp:TreeView id="LinksTreeView"
            Font-Names= "Arial"
            ForeColor="Blue"
            SelectedNodeStyle-ForeColor="Green"
            SelectedNodeStyle-VerticalPadding="0"
            OnSelectedNodeChanged="Select_Change"   
            runat="server">

Try this and for more info check this page

What follows is one way to solve the problem in ASP.NET 4.0 with web forms, in a master page.

In the presentation page you could have a TreeView such as the following:

<asp:TreeView
    ID="tv"
    runat="server"
    SelectedNodeStyle-BorderStyle="Solid"
    SelectedNodeStyle-HorizontalPadding="5"
    SelectedNodeStyle-VerticalPadding="5" 
    onselectednodechanged="tv_SelectedNodeChanged">
    <Nodes>
        <asp:TreeNode Text="Contact" Value="~/General/Contact.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Change login name" Value="~/General/ChangeLoginName.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Change password" Value="~/General/ChangePassword.aspx"></asp:TreeNode>
        <asp:TreeNode Text="Terms and Policies" Value="~/General/TermsOfUse.aspx"></asp:TreeNode>
    </Nodes>
</asp:TreeView></td>

Important things to note here are:

(1) The URLs for navigation are assigned to the "Value" property, not to the "NavigateUrl" property of the TreeNode class.

(2) We have defined styles for the selected node.

(3) We have defined an event, "onselectednodechanged." A simple way to do that is to double-click on the TreeView in Design View. This also creates an event handler stub in the code-behind file, which we will be using in just a moment.

In the code-behind file, the following three functions are all that is needed:

protected void HighlightSelectedLink(TreeNodeCollection nodes, string treeViewSelectedValue)
{
    if (!string.IsNullOrEmpty(treeViewSelectedValue))
    {
        foreach (TreeNode tn in nodes)
        {
            if (tn.Value == treeViewSelectedValue)
            {
                tn.Selected = true;
            }
            else
            {
                tn.Selected = false;
            }

            HighlightSelectedLink(tn.ChildNodes, treeViewSelectedValue);
        }
    }
}

protected void tv_SelectedNodeChanged(object sender, EventArgs e)
{
    string treeViewSelectedValue = tv.SelectedValue;

    if (treeViewSelectedValue.EndsWith(".aspx"))
    {
        Response.BufferOutput = true;
        Response.Redirect(tv.SelectedValue);
    }
}

protected void Page_PreRender(object sender, EventArgs e)
{
    string treeViewSelectedValue = Request.AppRelativeCurrentExecutionFilePath;

    if (!string.IsNullOrEmpty(treeViewSelectedValue))
    {
        TreeNodeCollection nodes = tv.Nodes;
        HighlightSelectedLink(nodes, treeViewSelectedValue);
    }
}

The second function is the handler mentioned above.

In code behind c# :

protected void tv_SelectedNodeChanged(object sender, EventArgs e)
{
    TreeView tv = (TreeView)sender;
    tv.SelectedNodeStyle.ForeColor = System.Drawing.Color.MidnightBlue;
    tv.SelectedNodeStyle.BackColor = System.Drawing.Color.PowderBlue;
    tv.SelectedNodeStyle.Font.Bold = true;
}