Click here to Skip to main content
15,868,016 members
Articles / Desktop Programming / Win32

TreeViewColumns User Control (Lite)

Rate me:
Please Sign up or sign in to vote.
4.87/5 (26 votes)
25 Mar 2009CPOL2 min read 111.2K   9.5K   87   29
A TreeView having columns.

Image 1

Introduction

This projects shows a TreeView user control having columns.

Background

There are TreeView controls adding columns to tree nodes. Most of these controls have a lot of code to make things work. If the specifications are lowered, a more simple approach can be taken to deliver a TreeViewColumns User Control lite edition.

The heart of the user control consists of a hybrid made out of a TreeView control and a ListView control. The TreeView control is positioned directly on the ListView control, hiding its body. Only the columns header of the ListView is visible. The columns of the ListView control are only used to set the column width, text alignment, and titles of the columns of the user control.

The TreeView's DrawMode property is set to OwnerDrawAll, and a DrawNode event handler paints the columns next to the TreeNodes.

C#
private void treeView1_DrawNode(object sender, DrawTreeNodeEventArgs e)
{
    e.DrawDefault = true;

    Rectangle rect = e.Bounds;

    if ((e.State & TreeNodeStates.Selected) != 0)
    {
        if ((e.State & TreeNodeStates.Focused) != 0)
            e.Graphics.FillRectangle(SystemBrushes.Highlight, rect);
        else
            e.Graphics.FillRectangle(SystemBrushes.Control, rect);
    }
    else
        e.Graphics.FillRectangle(Brushes.White, rect);

    e.Graphics.DrawRectangle(SystemPens.Control, rect);

    for (int intColumn = 1; intColumn < this.listView1.Columns.Count; 
        intColumn++)
    {
        rect.Offset(this.listView1.Columns[intColumn - 1].Width, 0);
        rect.Width = this.listView1.Columns[intColumn].Width;

        e.Graphics.DrawRectangle(SystemPens.Control, rect);

        string strColumnText;
        string[] list = e.Node.Tag as string[];
        if (list != null && intColumn<=list.Length)
            strColumnText = list[intColumn - 1];
        else
            strColumnText = intColumn + " " + e.Node.Text; // dummy

        TextFormatFlags flags = TextFormatFlags.EndEllipsis;
        switch(this.listView1.Columns[intColumn].TextAlign)
        {
            case HorizontalAlignment.Center:
                flags |= TextFormatFlags.HorizontalCenter;
                break;
            case HorizontalAlignment.Left:
                flags |= TextFormatFlags.Left;
                break;
            case HorizontalAlignment.Right:
                flags |= TextFormatFlags.Right;
                break;
            default:
                break;
        }

        rect.Y++;
        if ((e.State & TreeNodeStates.Selected) != 0 &&
            (e.State & TreeNodeStates.Focused) != 0)
            TextRenderer.DrawText(e.Graphics, 
                strColumnText, 
                e.Node.NodeFont, 
                rect, 
                SystemColors.HighlightText, 
                flags);
        else
            TextRenderer.DrawText(e.Graphics, 
                strColumnText, 
                e.Node.NodeFont, 
                rect, 
                e.Node.ForeColor, 
                e.Node.BackColor, 
                flags);
        rect.Y--;
    }
}

To give the user control a VisualStyles appearance, only these two lines of code are used:

C#
public TreeViewColumns()
{
    InitializeComponent();

    this.BackColor = VisualStyleInformation.TextControlBorder;
    this.Padding = new Padding(1);
}

The last thing the user control needs are some event handlers which are triggered by the user when clicking the 'rows' or the 'columns' of the user control.

C#
private void treeView1_Click(object sender, EventArgs e)
{
    Point p = this.treeView1.PointToClient(Control.MousePosition);
    TreeNode tn = this.treeView1.GetNodeAt(p);
    if (tn != null)
        this.treeView1.SelectedNode = tn;
}

private void listView1_ColumnWidthChanged(object sender, 
    ColumnWidthChangedEventArgs e)
{
    this.treeView1.Focus();
    this.treeView1.Invalidate();
}

private void listView1_ColumnWidthChanging(object sender, 
    ColumnWidthChangingEventArgs e)
{
    this.treeView1.Focus();
    this.treeView1.Invalidate();
}

I have kept the project simple, which makes it easier for others to expand the control by adding more and more features. It is by far the smallest TreeView having columns on CodeProject. But, it is a 'lite' version. So, don't complain if things are not working correctly under specific conditions.

Using the Code

To make use of the user control, the only thing you have to add is some string array to the Tag property of each TreeNode.

Really?

Yes!!

The user control has two properties which can be used to do the job. The TreeView itself can be accessed by the this.treeViewColumns1.TreeView property. For adjusting the columns, the this.treeViewColumns1.Columns property must be used. Keep in mind, Columns[0] is te space reserved for the TreeView itself.

An example of adding a TreeNode and columns to the user control:

C#
TreeNode treeNode = new TreeNode("test");
treeNode.Tag = new string[] { "col1", "col2" };
this.treeViewColumns1.TreeView.Nodes.Add(treeNode);

Points of Interest

Because it is a 'lite' control, you can change the columns to values where the TreeView looks garbled. So, you have to add code to do some boundary checking.

History

As of writing (March 2009), version 1.0.0.0 is presented.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Retired Van der Heijden Holding BV
Netherlands Netherlands
I'm Alphons van der Heijden, living in Lelystad, Netherlands, Europa, Earth. And currently I'm retiring from hard working ( ;- ), owning my own company. Because I'm full of energy, and a little to young to relax ...., I don't sit down, but create and recreate software solutions, that I like. Reinventing the wheel is my second nature. My interest is in the area of Internet technologies, .NET etc. I was there in 1992 when Mosaic came out, and from that point, my life changed dramatically, and so did the world, in fact. (Y)

Comments and Discussions

 
QuestionNice! But how to add to VB.net project? Pin
Member 145531947-Aug-19 9:20
Member 145531947-Aug-19 9:20 
QuestionVery simple and smart Pin
Member 139633808-Sep-18 10:17
Member 139633808-Sep-18 10:17 
QuestionHow to Iterate through nodes? Pin
Adrien19818-Oct-17 1:23
Adrien19818-Oct-17 1:23 
AnswerRe: How to Iterate through nodes? Pin
Adrien19818-Oct-17 2:16
Adrien19818-Oct-17 2:16 
QuestionHow do I add this control to my VB.NET project? Pin
Drogil22-Dec-16 11:41
Drogil22-Dec-16 11:41 
QuestionVery innovative and yet simple.. Pin
Mohan Sawant27-Jan-15 21:39
Mohan Sawant27-Jan-15 21:39 
GeneralMy vote of 3 Pin
Florian Trück25-Dec-14 1:29
Florian Trück25-Dec-14 1:29 
BugDesigner not working properly Pin
Florian Trück25-Dec-14 1:27
Florian Trück25-Dec-14 1:27 
QuestionGreat job! Pin
Tibor Bicskei20-Aug-14 21:14
Tibor Bicskei20-Aug-14 21:14 
GeneralGood Job !! Pin
RoyDengOK7-Feb-14 18:51
RoyDengOK7-Feb-14 18:51 
GeneralRe: Good Job !! Pin
Alphons van der Heijden29-May-14 22:22
professionalAlphons van der Heijden29-May-14 22:22 
QuestionHow can I remove the checkbox from first column Pin
Member 161654216-Aug-13 4:44
Member 161654216-Aug-13 4:44 
AnswerRe: How can I remove the checkbox from first column Pin
Alphons van der Heijden30-Aug-13 2:24
professionalAlphons van der Heijden30-Aug-13 2:24 
GeneralRe: How can I remove the checkbox from first column Pin
blodgyblodgy28-Oct-14 9:43
blodgyblodgy28-Oct-14 9:43 
GeneralRe: How can I remove the checkbox from first column Pin
Alphons van der Heijden8-Nov-14 11:25
professionalAlphons van der Heijden8-Nov-14 11:25 
Questionhow to move the items up and down Pin
Ram Shelke18-Mar-13 5:38
Ram Shelke18-Mar-13 5:38 
QuestionLeave the Focus while it is in the selection Pin
Shan-Bala18-Jan-13 3:59
Shan-Bala18-Jan-13 3:59 
QuestionLeave the Focus while it is in the selection. Pin
Shan Balamurugan18-Jan-13 3:54
Shan Balamurugan18-Jan-13 3:54 
GeneralMy vote of 5 Pin
Yvar Birx21-Nov-12 6:53
Yvar Birx21-Nov-12 6:53 
GeneralMy vote of 5 Pin
andywon2-Apr-12 20:15
andywon2-Apr-12 20:15 
GeneralSimplicity is a virtue! Pin
acui013-Jan-11 15:36
acui013-Jan-11 15:36 
GeneralMy vote of 5 Pin
acui013-Jan-11 15:35
acui013-Jan-11 15:35 
QuestionCan you get selected node back to the form? Pin
alan9320-Oct-10 9:13
alan9320-Oct-10 9:13 
GeneralMy vote of 5 Pin
Member 22992119-Aug-10 8:07
Member 22992119-Aug-10 8:07 
QuestionHow to add a series of node but without changing previous nodes? Pin
Member 22935446-Aug-10 2:21
Member 22935446-Aug-10 2:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.