自定义TreeView节点绘制出现伪影，如何消除？

问题说明 #

自定义TreeView采用OwnerDrawAll模式绘制节点时，出现了边缘伪影（旧绘制内容残留），需要消除这类视觉异常。

伪影产生原因 #

1. 绘制顺序逻辑错误：先清空节点区域，后续选中节点时又重新填充高亮背景，导致已绘制的展开/折叠图标被覆盖后残留痕迹
2. 清空范围不完整：仅清除节点文本区域，未包含左侧展开图标的位置，旧图标内容未被完全覆盖
3. 文本绘制无布局约束：DrawString未指定对齐和裁剪规则，可能导致文字边缘溢出节点边界

修复方案 #

1. 调整绘制流程顺序 #

正确的绘制优先级：先处理节点背景（普通/选中状态），再绘制图标和文本，避免内容被后续背景操作覆盖。

2. 扩展背景清空区域 #

将左侧展开图标的区域纳入背景清空范围，确保所有旧绘制内容被完全清除。

3. 优化文本绘制规则 #

使用StringFormat指定文本对齐、居中方式和裁剪规则，避免文字溢出节点边界。

4. 确保图标绘制层级正确 #

选中状态的背景绘制需在图标绘制之前，防止图标被背景覆盖。

修改后的DrawNode事件代码 #

private void FolderTreeView_DrawNode(object sender, DrawTreeNodeEventArgs e)
{
    var treeView = (TreeView)sender;
    Rectangle nodeRect = e.Node.Bounds;
    // 扩展绘制区域，包含左侧展开图标的位置（如果节点有子项）
    Rectangle fullDrawRect = nodeRect;
    if (e.Node.Nodes.Count > 0)
    {
        fullDrawRect = new Rectangle(nodeRect.Left - 16, nodeRect.Top, nodeRect.Width + 16, nodeRect.Height);
    }

    // 第一步：绘制节点背景（普通/选中状态）
    if ((e.State & TreeNodeStates.Selected) != 0)
    {
        e.Graphics.FillRectangle(SystemBrushes.Highlight, fullDrawRect);
    }
    else
    {
        e.Graphics.FillRectangle(SystemBrushes.Window, fullDrawRect);
    }

    /*--------- 绘制展开/折叠图标 ---------*/
    if (e.Node.Nodes.Count > 0)
    {
        Point ptExpand = new Point(nodeRect.Left - 16, nodeRect.Top + (nodeRect.Height - 16) / 2);
        Image expandCollapseImg = e.Node.IsExpanded ? collapseIcon : expandIcon;
        e.Graphics.DrawImage(expandCollapseImg, ptExpand);
    }

    /*--------- 绘制节点文本 ---------*/
    Font nodeFont = e.Node.NodeFont ?? treeView.Font;
    Brush textBrush = (e.State & TreeNodeStates.Selected) != 0 
        ? SystemBrushes.HighlightText 
        : SystemBrushes.WindowText;

    // 配置文本布局，避免溢出并居中对齐
    StringFormat sf = new StringFormat
    {
        Alignment = StringAlignment.Near,
        LineAlignment = StringAlignment.Center,
        Trimming = StringTrimming.EllipsisCharacter
    };
    // 文本绘制区域与节点边界对齐
    Rectangle textRect = new Rectangle(nodeRect.Left, nodeRect.Top, nodeRect.Width, nodeRect.Height);
    e.Graphics.DrawString(e.Node.Text, nodeFont, textBrush, textRect, sf);

    // 绘制焦点矩形
    if ((e.State & TreeNodeStates.Focused) != 0)
    {
        ControlPaint.DrawFocusRectangle(e.Graphics, nodeRect);
    }
}

额外优化建议 #

• 确保展开/折叠图标为带透明通道的PNG格式，避免图标边缘出现白色残留
• 增强DoubleBufferedTreeView的重绘稳定性，添加ResizeRedraw样式：

public DoubleBufferedTreeView()
{
    this.SetStyle(ControlStyles.OptimizedDoubleBuffer | 
                  ControlStyles.AllPaintingInWmPaint | 
                  ControlStyles.UserPaint |
                  ControlStyles.ResizeRedraw, true);
    this.UpdateStyles();
}

内容的提问来源于stack exchange，提问作者Daniel Lip