MultiColumnTree
A treeview with multiple columns
Multiline text on the node text or subitem value.
TreeNode Checkboxes. The check box of the tree node doesn't automatically appear when you set the CheckBoxes
property of the MultiColumnTree
object to true
, it will only appear when the tree node is selected, on hover, or the value of the CheckState
property is not unchecked.
The first column is frozen.
The first column is sorted in descending order.
The second column has custom background painting.
Custom filter button on filter popup window.
Column options popup window. It will display columns that have EnableHidden
or EnableFrozen
property set to true
. It allows you to hide or freeze the column on runtime.
Custom tooltip. However, it will be shown if you set the NodeToolTip
property on the MultiColumnTree
object to true
and the tree node has tooltip title, tooltip contents, or tooltip image. If the FullRowSelect
property of the MultiColumnTree
object is set to true
, the tooltip will be displayed when the mouse pointer hovers on the whole node, otherwise, the tooltip will be displayed only when the mouse pointer hovers on the node text.
The appearance when the FullRowSelect
property of the MultiColumnTree
object is set to true
.
Introduction
I need to show additional nodes on a tree, just like what a listview
did. However there is no such control in standard WinForms control. So, I decided to create on my own. A lot of improvement is needed to make this control fully useful.
Changes
I don't use TreeColumn
class anymore. That class has been replaced with ColumnHeader
class because I use it along with my ListView
, and Items
property of the TreeNode
has been replaced with SubItems
property.
Classes
There are classes that correspond with MultiColumnTree
class.
Column (ColumnHeader Class)
Represent a column object for a tree.
- Supports multiple column.
- Supports 4 different types of column size: fixed size, percent, auto, and fill.
- Supports runtime sorting.
- Supports display formatting,
DateTime
,Numeric
,Bar
, andCustom
. However, display format on the column 0 will be ignored. - When
Bar
is used in column format property, you can also specify the minimum and maximum range for the bar. - Supports column filtering, column filtering based on the column format used.
- Supports column background painting. You can paint your custom background of each column here.
- Two different alignments. The alignment of the Text on Column Header depends on
TextAlign
property, and the alignment of theSubItem
value depends onColumnAlign
property. - Supports tooltip. You can specify the tooltip title, tooltip contents, or tooltip image for each column.
New features of the Column:
- Custom filter. Enable custom filtering operation on each column. This feature will appear if you set
EnableFiltering
andEnableCustomFilter
properties totrue
on theColumnHeader
class. Custom filter will raiseColumnCustomFilter
event onMultiColumnTree
class, and you can set the custom filtering operation to the related column by setting theCustomFilter
property of theColumnHeader
. Custom filter property has reference type to Delegate FunctionCustomFilterFunction(ByVal value As Object) As Boolean.
- Enable Frozen and Frozen properties (I don't know how to name this feature). Just like Freeze Pane feature on Microsoft Excel. The Frozen columns will shown on the first order and above on the UnFrozen columns.
- Enable Hidden and Visible properties. Capability to show and hide the column.
Node (TreeNode Class)
Represent a node object for a tree. Below are additional behaviour.
- Supports tooltip title, contents, and image for each node.
- Supports multiline text for node. However, multiline text will appear when the
AllowMultiline
property of theMultiColumnTree
is set totrue
. - SubItems property. To set additional information as
SubItem
for theTreeNode
. - One property I adopted from
ListViewItem
,UseNodeStyleForSubItems
property (I changed the name here for node).
SubItem (TreeNode.TreeNodeSubItem Class) :
Represent a SubItem
of a Node
in the MultiColumnTree
. This class has the same behaviours with ListViewItem.ListViewSubItem
class, with several additional features.
- Supports multiline value
PintValueOnBar
property. This property allows you to show the value over theBar
, when the Column Format is set toBar
.
Collections
There are 4 collection classes to support MultiColumnTree
class.
TreeNodeCollection
Class. Represent the collection ofTreeNode
objects in aMultiColumnTree
control.TreeNode.TreeNodeSubItemCollection
Class. Represent the collection ofTreeNode.TreeNodeSubItem
objects in aTreeNode
object.MultiColumnTree.ColumnHeaderCollection
Class. Represent the collection ofColumnHeader
objects in aMultiColumnTree
control.MultiColumnTree.CheckedTreeNodeCollection
Class. Represent the collection on checkedTreeNode
objects in aMultiColumnTree
control.
Disadvantages
There are a lot of disadvantages (only the ones I know) compared with standard TreeView
control, and I hope I can cover it, or maybe someone can help to improve this.
- Doesn't support
ImageList
, so, it can't be used to populate a thing like explorer that uses Win32Api calls. - Doesn't support drag and drop operation (this factor makes this control very useless, in my opinion).
Implementation
To use the control, just drag and drop it from toolbox window in your IDE to your form in design view, just like another control.
To add columns to the tree control programmatically, use Columns.Add
method.
' Assumes that you have created an instance of MultiColumnTree, for example : tree
Dim aColumn As ColumnHeader = New ColumnHeader ' Create an instance of ColumnHeader
aColumn.Text = "Column 1" ' You can set the other
' properties like this
tree.Columns.Add(aColumn) ' Add this column to tree
To add a node to the tree control, use Nodes.Add
method. To add additional items to a node to be shown in the tree control based on its column, use Items.Add
method on a node object.
' Adding a node and additional information to tree
Dim aNode As TreeNode = New TreeNode ' Create an instance of TreeNode
aNode.Text = "Parent Node" ' Set another properties of
' the node here
aNode.SubItems.Add("Parent Sub 1") ' Add another items to this node here
tree.Nodes.Add(aNode) ' Add this node to tree
To add another node as child node to an existing node, use Nodes.Add
method on a node object.
' Adding a node and additional information to an existing node. For example : aNode
Dim childNode As TreeNode = New TreeNode ' Create an instance of TreeNode
childNode.Text = "Child Node" ' Set another properties of this node here
childNode.Items.Add("Child Sub 1") ' Add another items to this node here
aNode.Nodes.Add(childNode) ' Add this node to aNode
Create custom painting on a column(with index 1) background example.
' tree.BackgroundColumnPaint event handler
' On e (ColumnBackgroundPaintEventArgs) parameter, it has 4 fields :
' Column, column to be painted.
' ColumnIndex, index of the column in MultiColumnTree.Columns collection.
' Graphics, graphis object used to paint.
' Rectangle, rectangle in which to paint.
Private Sub tree_BackgroundColumnPaint(ByVal sender As Object, _
ByVal e As ColumnBackgroundPaintEventArgs) Handles tree.BackgroundColumnPaint
If e.ColumnIndex = 1 Then
Dim aBrush As LinearGradientBrush = New LinearGradientBrush_
(e.Rectangle, Color.White, Color.LightBlue, LinearGradientMode.Horizontal)
e.Graphics.FillRectangle(aBrush, e.Rectangle)
aBrush.Dispose()
End If
End Sub
Handling the ColumnCustomFilter
event on MultiColumnTree
object.
' tree.ColumnCustomFilter event handler
Private Sub tree_ColumnCustomFilter(ByVal sender As Object, _
ByVal e As Ai.Control.ColumnCustomFilterEventArgs) Handles tree.ColumnCustomFilter
' Perform your custom filter dialog here.
' If you want to cancel the operation, set e.CancelFilter to true.
' Add your custom filtering like this.
e.Column.CustomFilter = AddressOf column1CustomFilter
End Sub
' A function that have matching parameter and return types with
' Delegate Function CustomFilterFunction(ByVal value As Object) As Boolean
Private Function column1CustomFilter(ByVal value As Object) As Boolean
' This is just a sample, to perform custom filtering operation on specified column.
' Return true if the value is meet your custom filter parameter, false otherwise.
Return True
End Function
There are several bugs I received from others, and (hopefully, because I am working all alone, I can't test this control completely) have been fixed.
- Lost label after editing bug.
- Check box doesn't automatically appears when you set the
CheckBoxes
property totrue
, it will appear when theCheckState
of the node is not unchecked, or the mouse pointer is hovering on a node, or the node is selected. - I create my test project using Tab control, a
Button
on page 1, andMultiColumnTree
control on page 2, and I can populate the node inMultiColumnTree
control on Button click event.
This is my update, I'm sorry for taking a very long time.