TreeView allows either to show images for all nodes, or none at all. For special requirements, you might like using images only for some nodes. Using a dummy image or specifying an invalid image index, you can display a node without image. However, the blank space will look discomforting if tree lines are used. A possible remedy could use two transparent bitmaps, displaying the missing tree lines in a node's expanded and collapsed state. This works fine for varying background colors, but only for a given set of image size,
Indent. The proposed solution uses an owner-drawn
TreeView (.NET 2.0) to draw the missing tree lines.
TreeView (surprise, surprise), in our constructor, we immediately fix a bug with the
LineColor property. As the default value, it returns
Black, which is obviously not true. If the
LineColor was not previously specified, the underlying Win32 control returns -1 (default color). The .NET wrapper fails to interpret this as
SystemColors.GrayText and translates it to
public class ocTreeview : TreeView
public ocTreeView() : base()
base.LineColor = SystemColors.GrayText;
TreeNodes with image indices of
NOIMAGE value will be drawn with the missing tree lines.
public const int NOIMAGE = -1;
DrawMode property is set to
DrawNode event is raised whenever a
TreeNode needs painting (actually, frequent unnecessary repainting occurs). Unfortunately, the default painting is done after the
DrawNode event, so erasing a part of the default drawing is not possible. Thus, the image of a imageless node must either not be drawn at all, or at least be blank and transparent. Using the custom-draw capability of the underlying Win32 control allows a more fine-grained control of painting, but involves considerably more coding.
protected override void OnDrawNode(DrawTreeNodeEventArgs e)
e.DrawDefault = true;
We do additional drawing if tree lines are enabled, images are present, and the node should have no image.
if (base.ShowLines && base.ImageList != null
&& e.Node.ImageIndex == NOIMAGE)
const int SPACE_IL = 3;
int imgW = base.ImageList.ImageSize.Width;
int imgH = base.ImageList.ImageSize.Height;
int xPos = e.Node.Bounds.Left - SPACE_IL - imgW / 2;
int yPos = (e.Node.Bounds.Top + e.Node.Bounds.Bottom) / 2;
Rectangle imgRect = new Rectangle(xPos, yPos, 0, 0);
imgRect.Inflate(imgW / 2, imgH / 2);
Walking the geometry of the node is done best by calculating the location of the center of the various parts (present or not), and then inflating their rectangles (if present), working backwards from the left of the label to the plus-minus button.
With the image rectangle determined, here is the fun part: drawing the dotted lines. Hundreds of messages "Help: How do I draw a real dotted line?" with dozens of failing answers decompose to bits in pre-.NET group archives. Jean-Edouard Lachand-Robert provided the single solution (C++), using a pattern brush (yes,
SetPixel is also a way to go). With .NET, this has become strikingly easy, the
Pen class allows 1 pixel on/off dotted lines.
using (Pen p = new Pen(base.LineColor, 1))
p.DashStyle = DashStyle.Dot;
p.DashOffset = base.Indent % 2;
int yHor = yPos + ((base.ItemHeight - imgRect.Height) / 2) % 2;
e.Graphics.DrawLine(p, imgRect.Left, yHor, imgRect.Right, yHor);
Whether the line(s) must start with a dot or a space depends on the
Indent value. Less obvious is the shifting of the y position by 1 pixel for varying
ImageHeight values. If root lines are disabled, root nodes need special treatment, which is not shown here. At this stage, the missing tree line is provided for collapsed nodes. Unless the
TreeView uses the
Checkboxes style, we must draw an additional vertical tree line for expanded nodes.
if (!base.CheckBoxes && e.Node.IsExpanded)
int yVer = yHor + (int)p.DashOffset;
e.Graphics.DrawLine(p, xPos, yVer, xPos, e.Node.Bounds.Bottom);
Finally, we must ensure that a collapsing node is redrawn, as no
DrawNode event is raised for this occasion.
protected override void OnAfterCollapse(TreeViewEventArgs e)
if (!base.CheckBoxes && base.ImageList != null &&
e.Node.ImageIndex == NOIMAGE)
Using the code
Use it like the standard
TreeView, or paste the two methods into your own control. For
TreeNodes without images, specify the
NOIMAGE value for both the
SelectedImageIndex properties. Don't set their
SelectedImageKey properties. For the normal nodes, you are free to use indices or keys.
Here comes the ugly part: the WinForms team in their loving care provided identical properties as members of the
TreeView class itself, serving as default properties for nodes having unspecified (or invalid!) images. In order to prevent that imageless nodes become impregnated again, you must set these properties to a greater or equal value of the current number of images in the
Imagelist. This must be redone after any change in the image count or an eventual re-assigning of the
Imagelist can be overridden, thus this has to be the application's responsibility.
private void ensureDefaultImageIndex(TreeView tree)
if (tree.ImageList != null)
tree.ImageIndex = tree.ImageList.Images.Count;
tree.SelectedImageIndex = tree.ImageList.Images.Count;
As an alternative solution, add a blank, transparent image to the
Imagelist, refactor the
NOIMAGE constant as a property, and set it to the actual index of the dummy image.
Points of Interest
This was coded against the Comctl6 version on WinXP systems. Version 5 (Win98/Win2K) draws a little different, like a 2 pixel offset of the first root node for varying
ImageHeight values. Since I currently do not own a Win2K/.NET installation, I cannot test this, and therefore be interested in your observations and improvements.