Click here to Skip to main content
14,027,364 members
Click here to Skip to main content
Add your own
alternative version

Stats

24.8K views
1.6K downloads
26 bookmarked
Posted 19 Feb 2015
Licenced CPOL

TreeView with Controls (Supported Org Chart Style)

, 19 Feb 2015
Rate this:
Please Sign up or sign in to vote.
CTreeView is the advanced TreeView control for .NET WinForms that supports more features, different layouts and any controls in the nodes.

Introduction

Standard .NET TreeView control has poor functionality. Once I needed to put buttons into nodes, or even not only buttons, for example, buttons + check boxes + etc. There is no simple way to do it. I looked for existing solutions, but all of them provide restricted views of nodes. So, I created this custom control that may contain any WinForms controls in the nodes. Now I learned WPF and discovered that such things are much easier there, but I hope that my solution would be interesting for people who are still using WinForms.

Features

The most interesting features of the CTreeView control compared to standard TreeView are:

  • 3 different layouts
  • Multiselection of the nodes
  • Drag and drop nodes
  • Many configurable parameters
  • Possibility of the using in nodes any controls, including standard WinForms controls

All this provides different visual styles of the CTreeView. More detail below.

Sample 1.


This is the visual style sample like standard .NET TreeView control. The DrawStyle property is set into "LinearTree". There are user controls in the nodes that contain CheckBox and Label.

Sample 2.


This sample demonstrates that standard WinForms controls may be in the nodes. You can't select or drag this nodes because Button, ListBox and other standard classes don't support such things, however you may implement required logic for them using the INodeControl interface. The DrawStyle property is set into "HorizontalDiagram ".

Sample 3.

The last sample has "VerticalDiagram" value of the DrawStyle. There are NodeControl objects. They can be selected and dragged depends on SelectionMode and DragAndDropMode of the CTreeView. The SelectionMode has 4 possible values: Multi, MultiSameParent, Single, None. The DragAndDropMode has 3 possible values: ReplaceReorder, Reorder, Nothing. By combining them, you can get different behaviors of user interaction.

Structure

The CTreeView control is modeled on standard TreeView control. The main class CTreeView contains common properties and methods (for example, ExpandAll(), FirstNode, etc.) and collection of CTreeNode objects, that either contains their own collections of nodes. Therefore both CTreeView and CTreeNode classes implement the INodeContainer interface that main function is containing of CTreeNodeCollection object.

Each CTreeNode in the CTreeNodeCollection includes properties and methods (partially overlapping with CTreeView's members) and the Control property to visually represent this node. Control may be any of the standard WinForms controls or special NodeControl derived from UserControl.

The NodeControl class implements specific logic for selection and drag nodes that provides by INodeControl interface (I'm not sure that it's a better way, look at the remarks).

The main aspects of class hierarchy is presented on UML diagram:

The VisualStudio class diagrams with all classes, members and fields (also include into project):

Using the Code

The project's output file is a DLL library. For using of CTreeView control, you must include DLL into your project (use ControlTreeView namespace). For look at CTreeView control, you need just compile and run the code. The "test" project will start.

Example of creating and filling CTreeView with elements of previously created class MyControl : NodeControl:

CTreeView sampleCTreeView = new CTreeView();
Application.OpenForms[0].Controls.Add(sampleCTreeView);
sampleCTreeView.BeginUpdate();
sampleCTreeView.Nodes.Add(new CTreeNode("root node", new MyControl()));
for (int i = 0; i < 5; i++)
{
    sampleCTreeView.Nodes[0].Nodes.Add(new CTreeNode("node " + i, new MyControl()));
}
sampleCTreeView.EndUpdate();

Show every node's name:

sampleCTreeView.Nodes.TraverseNodes((node) =>
{
    MessageBox.Show(node.Name);
});

Show full path of the nodes with name "node 2":

MessageBox.Show(sampleCTreeView.Nodes.Find("node 2", true)[0].FullPath);

Remarks and Further Work

It's my first complicated component, so architecture and code aren't professional-like. It's working in simple applications, but for serious projects it may need some additional work. I'm sure there are a lot of places that may be optimized, for example, positioning node's algorithm, display method, select and drag logic or even class hierarchy itself.

I tried to comment properties and methods like Microsoft TreeView's original comments, but English isn't my native language, so comments also need be corrected for better literacy.

I'm not sure that I will to continue work on this project, however everyone may feel free to do it. The project is available on the GitHub. I would appreciate any help in improving code. Contact me if you have any questions.

History

It's a first revision.

License

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

Share

About the Author

Vyacheslav Chernykh
Russian Federation Russian Federation
My open-source projects are available at the GitHub: https://github.com/Feofilakt.

You may also be interested in...

Pro

Comments and Discussions

 
QuestionCan be used in WPF? Pin
ly_he3-Jan-18 3:01
memberly_he3-Jan-18 3:01 
QuestionChange Color of Lines Pin
Member 104242277-Aug-17 17:12
memberMember 104242277-Aug-17 17:12 
QuestionBig controls and a lot of nodes Pin
Axis237-Nov-16 5:51
memberAxis237-Nov-16 5:51 
SuggestionRe: Big controls and a lot of nodes Pin
Member 355096812-Jun-17 10:09
memberMember 355096812-Jun-17 10:09 
GeneralRe: Big controls and a lot of nodes Pin
Axis2312-Jun-17 20:21
memberAxis2312-Jun-17 20:21 
QuestionIs there a way to walk a TreeView from the children more below o Parent? Pin
Member 126293529-Aug-16 14:58
memberMember 126293529-Aug-16 14:58 
AnswerRe: Is there a way to walk a TreeView from the children more below o Parent? Pin
Vyacheslav Chernykh27-Sep-16 7:13
memberVyacheslav Chernykh27-Sep-16 7:13 
Question?How to Use The Control In Right to Left Layout Pin
Member 297968930-Jun-16 23:09
memberMember 297968930-Jun-16 23:09 
AnswerRe: ?How to Use The Control In Right to Left Layout Pin
Vyacheslav Chernykh3-Jul-16 19:16
memberVyacheslav Chernykh3-Jul-16 19:16 
GeneralRe: ?How to Use The Control In Right to Left Layout Pin
Member 297968927-Jul-16 21:25
memberMember 297968927-Jul-16 21:25 
Buglooks great Pin
sprague29511-Dec-15 8:01
membersprague29511-Dec-15 8:01 
GeneralRe: looks great Pin
Vyacheslav Chernykh12-Jan-16 17:24
memberVyacheslav Chernykh12-Jan-16 17:24 
QuestionMy vote of 5 Pin
Rollie13-Jun-15 16:20
memberRollie13-Jun-15 16:20 
GeneralGold work Pin
pmmachado22-Feb-15 11:12
memberpmmachado22-Feb-15 11:12 
QuestionNice! Pin
andre1234520-Feb-15 7:10
memberandre1234520-Feb-15 7:10 
QuestionMy vote of 5 Pin
Stylianos Polychroniadis20-Feb-15 4:53
memberStylianos Polychroniadis20-Feb-15 4:53 
GeneralMy vote of 5 Pin
Jaxag20-Feb-15 1:53
memberJaxag20-Feb-15 1:53 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190419.4 | Last Updated 19 Feb 2015
Article Copyright 2015 by Vyacheslav Chernykh
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid