前言
以前看别人的控件好看只有羡慕的份；以前觉得控件重绘是个很复杂的东西；以前知道MSDN很全面很专业却一直没有好好用起来；
作为初级程序猿，不能原地踏步，来吧，让我们一起把 TreeView 美化一下，每天进步一点点！
要点
1、WinForm自定义控件
2、重绘
3、MSDN使用
基础准备：利用MSDN查找我们需要的资料
1、进入MSDN技术资料库：http://msdn.microsoft.com/library
2、在右上角搜索栏里输入 TreeView
3、找到TreeView类（System.Windows.Forms）这一条【应该是搜索结果里的第二条】，里面详尽的介绍了这个类
这里直接附上地址：http://msdn.microsoft.com/zh-cn/library/system.windows.forms.treeview(v=vs.110).aspx
4、TreeView的方法、属性、事件等可以大概浏览下，知道有这个东西就行，继续往下看，我发现了我们需要的东西：
这里的意思是我们可以完全自定义TreeView的外观有2个要点：
一个是将DrawMode属性设置为TreeViewDrawMode.Normal以外的值；
一个是在DrawNode事件里我们可以进行对控件的皮肤修改
5、那DrawNode事件怎么用呢？截图中我们看到末尾的 DrawNode 字样是个超级链接，果断点进去一看究竟，于是发现了如下描述：
6、这段文字很详尽的介绍了DrawNode事件，我们可以总结出3个要点：
a、TreeView提供2种自定义模式，分别是OwnerDrawText和OwnerDrawAll。
OwnerDrawText：允许我们自定义节点的字体样式
OwnerDrawAll：允许我们自定义节点的所有元素样式，包括字体、背景、图标等
b、TreeNode有2个区域的概念：分别是【点击测试区域】和【整行区域】（整行区域这个名字自己取的，大家只要知道什么意思就行），来张图更容易理解
可能区域的范围图中不是很精确，但是我们能够大概的知道 【整行区域】 是这个节点这一行所有的面积，而 【点击测试区域】 是这个节点所有表现元素（图标+字体）所占的面积，从名字上我们也大概可以猜到这个【点击测试区域】跟用户鼠标点击的位置和对应的表现行为（单击选中，双击展开等）有关。
c、在DrawNode事件中，参数 DrawTreeNodeEventArgs.Bounds 我们可以获取到节点的【整行区域】，而 DrawTreeNodeEventArgs.Node.Bounds 我们可以获取到节点的【点击测试区域】
7、我们MSDN网页继续向下看，发现还有一段代码示例如下：
ps:示例什么的最好了，又直接又快捷，你懂的。而且MSDN里面的代码考虑都能周全，copy下来直接放到新建的程序里稍作调整就可以直接运行看到效果，然后我们可以逐行慢慢分析理解
using System;
using System.Drawing;
using System.Windows.Forms; public class TreeViewOwnerDraw : Form
{
private TreeView myTreeView; // Create a Font object for the node tags.
Font tagFont = new Font("Helvetica", , FontStyle.Bold); public TreeViewOwnerDraw()
{
// Create and initialize the TreeView control.
myTreeView = new TreeView();
myTreeView.Dock = DockStyle.Fill;
myTreeView.BackColor = Color.Tan;
myTreeView.CheckBoxes = true; // Add nodes to the TreeView control.
TreeNode node;
for (int x = ; x < ; ++x)
{
// Add a root node to the TreeView control.
node = myTreeView.Nodes.Add(String.Format("Task {0}", x));
for (int y = ; y < ; ++y)
{
// Add a child node to the root node.
node.Nodes.Add(String.Format("Subtask {0}", y));
}
}
myTreeView.ExpandAll(); // Add tags containing alert messages to a few nodes
// and set the node background color to highlight them.
myTreeView.Nodes[].Nodes[].Tag = "urgent!";
myTreeView.Nodes[].Nodes[].BackColor = Color.Yellow;
myTreeView.SelectedNode = myTreeView.Nodes[].Nodes[];
myTreeView.Nodes[].Nodes[].Tag = "urgent!";
myTreeView.Nodes[].Nodes[].BackColor = Color.Yellow; // Configure the TreeView control for owner-draw and add
// a handler for the DrawNode event.
myTreeView.DrawMode = TreeViewDrawMode.OwnerDrawText;
myTreeView.DrawNode +=
new DrawTreeNodeEventHandler(myTreeView_DrawNode); // Add a handler for the MouseDown event so that a node can be
// selected by clicking the tag text as well as the node text.
myTreeView.MouseDown += new MouseEventHandler(myTreeView_MouseDown); // Initialize the form and add the TreeView control to it.
this.ClientSize = new Size(, );
this.Controls.Add(myTreeView);
} // Clean up any resources being used.
protected override void Dispose(bool disposing)
{
if (disposing)
{
tagFont.Dispose();
}
base.Dispose(disposing);
} [STAThreadAttribute()]
static void Main()
{
Application.Run(new TreeViewOwnerDraw());
} // Draws a node.
private void myTreeView_DrawNode(
object sender, DrawTreeNodeEventArgs e)
{
// Draw the background and node text for a selected node.
if ((e.State & TreeNodeStates.Selected) != )
{
// Draw the background of the selected node. The NodeBounds
// method makes the highlight rectangle large enough to
// include the text of a node tag, if one is present.
e.Graphics.FillRectangle(Brushes.Green, NodeBounds(e.Node)); // Retrieve the node font. If the node font has not been set,
// use the TreeView font.
Font nodeFont = e.Node.NodeFont;
if (nodeFont == null) nodeFont = ((TreeView)sender).Font; // Draw the node text.
e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White,
Rectangle.Inflate(e.Bounds, , ));
} // Use the default background and node text.
else
{
e.DrawDefault = true;
} // If a node tag is present, draw its string representation
// to the right of the label text.
if (e.Node.Tag != null)
{
e.Graphics.DrawString(e.Node.Tag.ToString(), tagFont,
Brushes.Yellow, e.Bounds.Right + , e.Bounds.Top);
} // If the node has focus, draw the focus rectangle large, making
// it large enough to include the text of the node tag, if present.
if ((e.State & TreeNodeStates.Focused) != )
{
using (Pen focusPen = new Pen(Color.Black))
{
focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
Rectangle focusBounds = NodeBounds(e.Node);
focusBounds.Size = new Size(focusBounds.Width - ,
focusBounds.Height - );
e.Graphics.DrawRectangle(focusPen, focusBounds);
}
}
} // Selects a node that is clicked on its label or tag text.
private void myTreeView_MouseDown(object sender, MouseEventArgs e)
{
TreeNode clickedNode = myTreeView.GetNodeAt(e.X, e.Y);
if (NodeBounds(clickedNode).Contains(e.X, e.Y))
{
myTreeView.SelectedNode = clickedNode;
}
} // Returns the bounds of the specified node, including the region
// occupied by the node label and any node tag displayed.
private Rectangle NodeBounds(TreeNode node)
{
// Set the return value to the normal node bounds.
Rectangle bounds = node.Bounds;
if (node.Tag != null)
{
// Retrieve a Graphics object from the TreeView handle
// and use it to calculate the display width of the tag.
Graphics g = myTreeView.CreateGraphics();
int tagWidth = (int)g.MeasureString
(node.Tag.ToString(), tagFont).Width + ; // Adjust the node bounds using the calculated value.
bounds.Offset(tagWidth/, );
bounds = Rectangle.Inflate(bounds, tagWidth/, );
g.Dispose();
} return bounds; } }
8、这段代码里我发现了几个实用的：
1、TreeView 的 GetNodeAt 方法支持根据鼠标点击坐标获取对应节点：
TreeNode clickedNode = myTreeView.GetNodeAt(e.X, e.Y);
2、TreeView 的 CreateGraphics 方法可以创建当前实例的 Graphics 对象：
Graphics g = myTreeView.CreateGraphics();
g.Dispose();
3、DrawNode事件中的节点状态判断写法：
例如判断当前节点为选中状态 if ((e.State & TreeNodeStates.Selected) != 0)
4、描绘文字的方法：
e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White,Rectangle.Inflate(e.Bounds, 2, 0));
5、描绘背景的方法：
e.Graphics.DrawRectangle(focusPen, focusBounds);
9、好的，准备工作差不多了，开始我们的皮肤美化之旅吧！
项目创建
步骤一：新建Winfrom项目，并新建一个自定义控件
步骤二：修改MyTreeView类继承TreeView，注意这里需要添加引用 using System.Windows.Forms;
步骤三：根据自己需要修改样式，下面是我的代码：
public partial class BaseTreeView : TreeView
{ Color drawTextColor = Color.FromArgb(, , ); public BaseTreeView()
{
InitializeComponent(); this.DrawMode = TreeViewDrawMode.OwnerDrawAll;
this.FullRowSelect = true;
this.ItemHeight = ;
this.HotTracking = true;
this.ShowLines = true; } protected override void OnDrawNode(DrawTreeNodeEventArgs e)
{
base.OnDrawNode(e); //节点背景绘制
if (e.Node.IsSelected)
{
e.Graphics.DrawImage(Resources.tree_Selected, e.Bounds);
}
else if ((e.State & TreeNodeStates.Hot) != )//|| currentMouseMoveNode == e.Node)
{
e.Graphics.DrawImage(Resources.tree_Hover, e.Bounds);
}
else
{
e.Graphics.FillRectangle(Brushes.White, e.Bounds);
} //节点头图标绘制
if (e.Node.IsExpanded)
{
e.Graphics.DrawImage(Resources.tree_NodeExpend, e.Node.Bounds.X - , e.Node.Bounds.Y + );
}
else if (e.Node.IsExpanded == false && e.Node.Nodes.Count > )
{
e.Graphics.DrawImage(Resources.tree_NodeCollaps, e.Node.Bounds.X - , e.Node.Bounds.Y + );
} //文本绘制
using (Font foreFont = new Font(this.Font, FontStyle.Regular))
using (Brush drawTextBrush = new SolidBrush(drawTextColor))
{
e.Graphics.DrawString(e.Node.Text, foreFont, drawTextBrush, e.Node.Bounds.Left + , e.Node.Bounds.Top + );
}
} protected override void OnMouseDoubleClick(MouseEventArgs e)
{
base.OnMouseDoubleClick(e);
TreeNode tn = this.GetNodeAt(e.Location);
//调整【点击测试区域】大小，包括图标
Rectangle bounds = new Rectangle(tn.Bounds.Left - , tn.Bounds.Y, tn.Bounds.Width - , tn.Bounds.Height);
if (tn != null && bounds.Contains(e.Location) == false)
{
if (tn.IsExpanded == false)
tn.Expand();
else
tn.Collapse();
}
} protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
TreeNode tn = this.GetNodeAt(e.Location);
this.SelectedNode = tn;
} TreeNode currentNode = null;
protected override void OnMouseMove(MouseEventArgs e)
{
base.OnMouseMove(e);
TreeNode tn = this.GetNodeAt(e.Location);
Graphics g = this.CreateGraphics();
if (currentNode != tn)
{
//绘制当前节点的hover背景
if (tn != null)
OnDrawNode(new DrawTreeNodeEventArgs(g, tn, new Rectangle(, tn.Bounds.Y, this.Width, tn.Bounds.Height), TreeNodeStates.Hot)); //取消之前hover的节点背景
if (currentNode != null)
OnDrawNode(new DrawTreeNodeEventArgs(g, currentNode, new Rectangle(, currentNode.Bounds.Y, this.Width, currentNode.Bounds.Height), TreeNodeStates.Default));
}
currentNode = tn;
g.Dispose();
} protected override void OnMouseLeave(EventArgs e)
{
base.OnMouseLeave(e);
//移出控件时取消Hover背景
if (currentNode != null)
{
Graphics g = this.CreateGraphics();
OnDrawNode(new DrawTreeNodeEventArgs(g, currentNode, new Rectangle(, currentNode.Bounds.Y, this.Width, currentNode.Bounds.Height), TreeNodeStates.Default));
}
}
}
效果如下图：深蓝色为节点选中时的效果，淡蓝色为鼠标停留在节点上的效果
说明1：因为默认的TreeView点击非【点击测试区域】时是不触发动作效果的【单击节点选中效果、双击节点展开等效果】
原本想尝试修改节点的【点击测试区域】扩大到【整行区域】，后来没有找到方法，所以只能变通的实现这个效果，因此在我的代码里在其它事件里也进行了处理，不过还好我要的效果是实现了
说明2：demo下载