参考链接:https://www.cnblogs.com/xm_cpppp/p/3622434.html

来吧，给你的Winform列表控件画个妆

前言

以前看别人的控件好看只有羡慕的份；以前觉得控件重绘是个很复杂的东西；以前知道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的方法、属性、事件等可以大概浏览下，知道有这个东西就行，继续往下看，我发现了我们需要的东西：
来吧，给你的Winform列表控件画个妆 - 图1
这里的意思是我们可以完全自定义TreeView的外观有2个要点：
　　一个是将DrawMode属性设置为TreeViewDrawMode.Normal以外的值；
　　一个是在DrawNode事件里我们可以进行对控件的皮肤修改
5、那DrawNode事件怎么用呢？截图中我们看到末尾的 DrawNode 字样是个超级链接，果断点进去一看究竟，于是发现了如下描述：
来吧，给你的Winform列表控件画个妆 - 图2
6、这段文字很详尽的介绍了DrawNode事件，我们可以总结出3个要点：
　　a、TreeView提供2种自定义模式，分别是OwnerDrawText和OwnerDrawAll。
OwnerDrawText：允许我们自定义节点的字体样式
OwnerDrawAll：允许我们自定义节点的所有元素样式，包括字体、背景、图标等
　　b、TreeNode有2个区域的概念：分别是【点击测试区域】和【整行区域】（整行区域这个名字自己取的，大家只要知道什么意思就行），来张图更容易理解
来吧，给你的Winform列表控件画个妆 - 图3可能区域的范围图中不是很精确，但是我们能够大概的知道 【整行区域】 是这个节点这一行所有的面积，而 【点击测试区域】 是这个节点所有表现元素（图标+字体）所占的面积，从名字上我们也大概可以猜到这个【点击测试区域】跟用户鼠标点击的位置和对应的表现行为（单击选中，双击展开等）有关。
　　c、在DrawNode事件中，参数 DrawTreeNodeEventArgs.Bounds 我们可以获取到节点的【整行区域】，而 DrawTreeNodeEventArgs.Node.Bounds 我们可以获取到节点的【点击测试区域】
7、我们MSDN网页继续向下看，发现还有一段代码示例如下：
　　ps:示例什么的最好了，又直接又快捷，你懂的。而且MSDN里面的代码考虑都能周全，copy下来直接放到新建的程序里稍作调整就可以直接运行看到效果，然后我们可以逐行慢慢分析理解

  1. using System;
  2. using System.Drawing;
  3. using System.Windows.Forms;
  5. public class TreeViewOwnerDraw : Form
  6. {
  7.     private TreeView myTreeView;
  9.     // Create a Font object for the node tags.
  10.     Font tagFont = new Font("Helvetica", 8, FontStyle.Bold);
  12.     public TreeViewOwnerDraw()
  13.     {
  14.         // Create and initialize the TreeView control.
  15.         myTreeView = new TreeView();
  16.         myTreeView.Dock = DockStyle.Fill;
  17.         myTreeView.BackColor = Color.Tan;
  18.         myTreeView.CheckBoxes = true;
  20.         // Add nodes to the TreeView control.
  21.         TreeNode node;
  22.         for (int x = 1; x < 4; ++x)
  23.         {
  24.             // Add a root node to the TreeView control.
  25.             node = myTreeView.Nodes.Add(String.Format("Task {0}", x));
  26.             for (int y = 1; y < 4; ++y)
  27.             {
  28.                 // Add a child node to the root node.
  29.                 node.Nodes.Add(String.Format("Subtask {0}", y));
  30.             }
  31.         }
  32.         myTreeView.ExpandAll();
  34.         // Add tags containing alert messages to a few nodes 
  35.         // and set the node background color to highlight them.
  36.         myTreeView.Nodes[1].Nodes[0].Tag = "urgent!";
  37.         myTreeView.Nodes[1].Nodes[0].BackColor = Color.Yellow;
  38.         myTreeView.SelectedNode = myTreeView.Nodes[1].Nodes[0];
  39.         myTreeView.Nodes[2].Nodes[1].Tag = "urgent!";
  40.         myTreeView.Nodes[2].Nodes[1].BackColor = Color.Yellow;
  42.         // Configure the TreeView control for owner-draw and add
  43.         // a handler for the DrawNode event.
  44.         myTreeView.DrawMode = TreeViewDrawMode.OwnerDrawText;
  45.         myTreeView.DrawNode += 
  46.             new DrawTreeNodeEventHandler(myTreeView_DrawNode);
  48.         // Add a handler for the MouseDown event so that a node can be 
  49.         // selected by clicking the tag text as well as the node text.
  50.         myTreeView.MouseDown += new MouseEventHandler(myTreeView_MouseDown);
  52.         // Initialize the form and add the TreeView control to it.
  53.         this.ClientSize = new Size(292, 273);
  54.         this.Controls.Add(myTreeView);
  55.     }
  57.     // Clean up any resources being used.        
  58.     protected override void Dispose(bool disposing)
  59.     {
  60.         if (disposing)
  61.         {
  62.             tagFont.Dispose();
  63.         }
  64.         base.Dispose(disposing);
  65.     }
  67.     [STAThreadAttribute()]
  68.     static void Main() 
  69.     {
  70.         Application.Run(new TreeViewOwnerDraw());
  71.     }
  73.     // Draws a node.
  74.     private void myTreeView_DrawNode(
  75.         object sender, DrawTreeNodeEventArgs e)
  76.     {
  77.         // Draw the background and node text for a selected node.
  78.         if ((e.State & TreeNodeStates.Selected) != 0)
  79.         {
  80.             // Draw the background of the selected node. The NodeBounds
  81.             // method makes the highlight rectangle large enough to
  82.             // include the text of a node tag, if one is present.
  83.             e.Graphics.FillRectangle(Brushes.Green, NodeBounds(e.Node));
  85.             // Retrieve the node font. If the node font has not been set,
  86.             // use the TreeView font.
  87.             Font nodeFont = e.Node.NodeFont;
  88.             if (nodeFont == null) nodeFont = ((TreeView)sender).Font;
  90.             // Draw the node text.
  91.             e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White,
  92.                 Rectangle.Inflate(e.Bounds, 2, 0));
  93.         }
  95.         // Use the default background and node text.
  96.         else 
  97.         {
  98.             e.DrawDefault = true;
  99.         }
  101.         // If a node tag is present, draw its string representation 
  102.         // to the right of the label text.
  103.         if (e.Node.Tag != null)
  104.         {
  105.             e.Graphics.DrawString(e.Node.Tag.ToString(), tagFont,
  106.                 Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top);
  107.         }
  109.         // If the node has focus, draw the focus rectangle large, making
  110.         // it large enough to include the text of the node tag, if present.
  111.         if ((e.State & TreeNodeStates.Focused) != 0)
  112.         {
  113.             using (Pen focusPen = new Pen(Color.Black))
  114.             {
  115.                 focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
  116.                 Rectangle focusBounds = NodeBounds(e.Node);
  117.                 focusBounds.Size = new Size(focusBounds.Width - 1, 
  118.                 focusBounds.Height - 1);
  119.                 e.Graphics.DrawRectangle(focusPen, focusBounds);
  120.             }
  121.         }
  122.     }
  124.     // Selects a node that is clicked on its label or tag text.
  125.     private void myTreeView_MouseDown(object sender, MouseEventArgs e)
  126.     {
  127.         TreeNode clickedNode = myTreeView.GetNodeAt(e.X, e.Y);
  128.         if (NodeBounds(clickedNode).Contains(e.X, e.Y))
  129.         {
  130.             myTreeView.SelectedNode = clickedNode;
  131.         }
  132.     }
  134.     // Returns the bounds of the specified node, including the region 
  135.     // occupied by the node label and any node tag displayed.
  136.     private Rectangle NodeBounds(TreeNode node)
  137.     {
  138.         // Set the return value to the normal node bounds.
  139.         Rectangle bounds = node.Bounds;
  140.         if (node.Tag != null)
  141.         {
  142.             // Retrieve a Graphics object from the TreeView handle
  143.             // and use it to calculate the display width of the tag.
  144.             Graphics g = myTreeView.CreateGraphics(); 
  145.             int tagWidth = (int)g.MeasureString
  146.                 (node.Tag.ToString(), tagFont).Width + 6;
  148.             // Adjust the node bounds using the calculated value.
  149.             bounds.Offset(tagWidth/2, 0);
  150.             bounds = Rectangle.Inflate(bounds, tagWidth/2, 0);
  151.             g.Dispose();
  152.          }
  154.         return bounds;
  156.     }
  158. }

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;
步骤三：根据自己需要修改样式，下面是我的代码：

  1. public partial class BaseTreeView : TreeView
  2.     {
  4.         Color drawTextColor = Color.FromArgb(81, 81, 81);
  6.         public BaseTreeView()
  7.         {
  8.             InitializeComponent();
  10.             this.DrawMode = TreeViewDrawMode.OwnerDrawAll;
  11.             this.FullRowSelect = true;
  12.             this.ItemHeight = 23;
  13.             this.HotTracking = true;
  14.             this.ShowLines = true;
  16.         }
  18.         protected override void OnDrawNode(DrawTreeNodeEventArgs e)
  19.         {
  20.             base.OnDrawNode(e);
  22.             //节点背景绘制
  23.             if (e.Node.IsSelected)
  24.             {
  25.                 e.Graphics.DrawImage(Resources.tree_Selected, e.Bounds);
  26.             }
  27.             else if ((e.State & TreeNodeStates.Hot) != 0)//|| currentMouseMoveNode == e.Node)
  28.             {
  29.                 e.Graphics.DrawImage(Resources.tree_Hover, e.Bounds);
  30.             }
  31.             else
  32.             {
  33.                 e.Graphics.FillRectangle(Brushes.White, e.Bounds);
  34.             }
  36.             //节点头图标绘制
  37.             if (e.Node.IsExpanded)
  38.             {
  39.                 e.Graphics.DrawImage(Resources.tree_NodeExpend, e.Node.Bounds.X - 12, e.Node.Bounds.Y + 6);
  40.             }
  41.             else if (e.Node.IsExpanded == false && e.Node.Nodes.Count > 0)
  42.             {
  43.                 e.Graphics.DrawImage(Resources.tree_NodeCollaps, e.Node.Bounds.X - 12, e.Node.Bounds.Y + 6);
  44.             }
  46.             //文本绘制
  47.             using (Font foreFont = new Font(this.Font, FontStyle.Regular))
  48.             using (Brush drawTextBrush = new SolidBrush(drawTextColor))
  49.             {
  50.                 e.Graphics.DrawString(e.Node.Text, foreFont, drawTextBrush, e.Node.Bounds.Left + 5, e.Node.Bounds.Top + 5);
  51.             }
  52.         }
  54.         protected override void OnMouseDoubleClick(MouseEventArgs e)
  55.         {
  56.             base.OnMouseDoubleClick(e);
  57.             TreeNode tn = this.GetNodeAt(e.Location);
  58.             //调整【点击测试区域】大小，包括图标
  59.             Rectangle bounds = new Rectangle(tn.Bounds.Left - 12, tn.Bounds.Y, tn.Bounds.Width - 5, tn.Bounds.Height);
  60.             if (tn != null && bounds.Contains(e.Location) == false)
  61.             {
  62.                 if (tn.IsExpanded == false)
  63.                     tn.Expand();
  64.                 else
  65.                     tn.Collapse();
  66.             }
  67.         }
  69.         protected override void OnMouseClick(MouseEventArgs e)
  70.         {
  71.             base.OnMouseClick(e);
  72.             TreeNode tn = this.GetNodeAt(e.Location);
  73.             this.SelectedNode = tn;
  74.         }
  76.         TreeNode currentNode = null;
  77.         protected override void OnMouseMove(MouseEventArgs e)
  78.         {
  79.             base.OnMouseMove(e);
  80.             TreeNode tn = this.GetNodeAt(e.Location);
  81.             Graphics g = this.CreateGraphics();
  82.             if (currentNode != tn)
  83.             {
  84.                 //绘制当前节点的hover背景
  85.                 if (tn != null)
  86.                     OnDrawNode(new DrawTreeNodeEventArgs(g, tn, new Rectangle(0, tn.Bounds.Y, this.Width, tn.Bounds.Height), TreeNodeStates.Hot));
  88.                 //取消之前hover的节点背景
  89.                 if (currentNode != null)
  90.                     OnDrawNode(new DrawTreeNodeEventArgs(g, currentNode, new Rectangle(0, currentNode.Bounds.Y, this.Width, currentNode.Bounds.Height), TreeNodeStates.Default));
  91.             }
  92.             currentNode = tn;
  93.             g.Dispose();
  94.         }
  97.         protected override void OnMouseLeave(EventArgs e)
  98.         {
  99.             base.OnMouseLeave(e);
  100.             //移出控件时取消Hover背景
  101.             if (currentNode != null)
  102.             {
  103.                 Graphics g = this.CreateGraphics();
  104.                 OnDrawNode(new DrawTreeNodeEventArgs(g, currentNode, new Rectangle(0, currentNode.Bounds.Y, this.Width, currentNode.Bounds.Height), TreeNodeStates.Default));
  105.             }
  106.         }
  107.     }

　效果如下图：深蓝色为节点选中时的效果，淡蓝色为鼠标停留在节点上的效果
　　　　来吧，给你的Winform列表控件画个妆 - 图4来吧，给你的Winform列表控件画个妆 - 图5来吧，给你的Winform列表控件画个妆 - 图6
说明1：因为默认的TreeView点击非【点击测试区域】时是不触发动作效果的【单击节点选中效果、双击节点展开等效果】
原本想尝试修改节点的【点击测试区域】扩大到【整行区域】，后来没有找到方法，所以只能变通的实现这个效果，因此在我的代码里在其它事件里也进行了处理，不过还好我要的效果是实现了
说明2：demo下载