Click here to Skip to main content
12,406,528 members (29,648 online)
Click here to Skip to main content
Add your own
alternative version

Stats

59.7K views
7.3K downloads
84 bookmarked
Posted

TreeViewColumns User Control (Lite)

, 25 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A TreeView having columns.

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.

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:

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.

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:

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)

Share

About the Author

Alphons van der Heijden
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)

You may also be interested in...

Comments and Discussions

 
QuestionVery innovative and yet simple.. Pin
Mohan Sawant27-Jan-15 21:39
memberMohan Sawant27-Jan-15 21:39 
GeneralMy vote of 3 Pin
Florian Trück25-Dec-14 1:29
memberFlorian Trück25-Dec-14 1:29 
BugDesigner not working properly Pin
Florian Trück25-Dec-14 1:27
memberFlorian Trück25-Dec-14 1:27 
QuestionGreat job! Pin
Tibor Bicskei20-Aug-14 21:14
memberTibor Bicskei20-Aug-14 21:14 
GeneralGood Job !! Pin
RoyDengOK7-Feb-14 18:51
memberRoyDengOK7-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
memberMember 161654216-Aug-13 4:44 
AnswerRe: How can I remove the checkbox from first column Pin
Alphons van der Heijden30-Aug-13 2:24
memberAlphons van der Heijden30-Aug-13 2:24 
GeneralRe: How can I remove the checkbox from first column Pin
blodgyblodgy28-Oct-14 9:43
memberblodgyblodgy28-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
memberRam Shelke18-Mar-13 5:38 
QuestionLeave the Focus while it is in the selection Pin
Member 407163318-Jan-13 3:59
memberMember 407163318-Jan-13 3:59 
QuestionLeave the Focus while it is in the selection. Pin
Shan Balamurugan18-Jan-13 3:54
memberShan Balamurugan18-Jan-13 3:54 
GeneralMy vote of 5 Pin
Yvar Birx21-Nov-12 6:53
memberYvar Birx21-Nov-12 6:53 
GeneralMy vote of 5 Pin
andywon2-Apr-12 20:15
memberandywon2-Apr-12 20:15 
GeneralSimplicity is a virtue! Pin
austinc3-Jan-11 15:36
memberaustinc3-Jan-11 15:36 
GeneralMy vote of 5 Pin
austinc3-Jan-11 15:35
memberaustinc3-Jan-11 15:35 
QuestionCan you get selected node back to the form? Pin
alan9320-Oct-10 9:13
memberalan9320-Oct-10 9:13 
GeneralMy vote of 5 Pin
Member 22992119-Aug-10 8:07
memberMember 22992119-Aug-10 8:07 
QuestionHow to add a series of node but without changing previous nodes? Pin
Member 22935446-Aug-10 2:21
memberMember 22935446-Aug-10 2:21 
GeneralGreat Job Pin
tonyt9-Feb-10 3:37
membertonyt9-Feb-10 3:37 
GeneralRe: Great Job Pin
Alphons van der Heijden11-Feb-10 1:10
memberAlphons van der Heijden11-Feb-10 1:10 
GeneralGood Job Pin
defineconst30-Mar-09 14:42
memberdefineconst30-Mar-09 14:42 
GeneralNice!! Pin
Chris Richner25-Mar-09 7:08
memberChris Richner25-Mar-09 7:08 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160730.1 | Last Updated 25 Mar 2009
Article Copyright 2009 by Alphons van der Heijden
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid