玩转控件：重绘ComboBox —— 让ComboBox多列显示 (提供源码下载)

前言
高考结束了，马上又将会有这么一群孩子，迫不及待的扔下书包，去聚餐，通宵上网，旅行，KTV，闲逛，狂欢……认为自己终于解放了……殊不知，你们离开的，就是天堂。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　-- 致 即将步入社会的孩纸们　　

缘由

最近在维护一个winform项目，公司购买的是DevExpress控件 (请问怎么联系DevExpress工作人员？ 我想询问下，广告费是怎么给的。:p），经过公司大牛们对DevExpress控件疯狂的重写、封装、加密、混淆...等一系列的操作，制作了一套 安全+实用 、基于DevExpress控件又高于DevExpress控件的模板。此时，大家也许觉得我夸张了。但是哥很淡定的告诉大家：不信拉倒！

一系列绚丽的控件中，目前最让我久久不能忘记吃早餐的就是ComboBoxEdit的显示多列的功能。所以我就想，能不能用普通的ComboBox控件实现这样的功能，带着这样的问题询问了没有被公司网络限制的度娘，结果度娘告诉我需要用一个TextBox结合一个ListView或者GridView来实现这样的功能。我嘞个去～ 这不是和Web里面DIV的显示和隐藏一样了么。 搞得跟个二五八萬似的！ 深叹一口气，脑子一转想起了上篇《公用章水印工具》中用到的GDI+，于是有了下文：

实施：新建组件类
首先，新建一个winform窗体项目，新建一个组件类，并让其继承ComboBox控件类.

public partial class MyComboBox : ComboBox

然后，就是需要做的就是：重写涉及到下拉列表显示的事件了。重写之前需要注意到一点是：将ComboBox控件的DrawMode 设置为DrawMode.OwnerDrawVariable(手动绘制元素)

无废话，直接贴出核心代码：

/// <summary>
/// 初始化数据源各列的名称
/// </summary>
private void InitializeColumns()
{
PropertyDescriptorCollection propertyDescriptorCollection = DataManager.GetItemProperties();
columnWidths = new float[propertyDescriptorCollection.Count];
columnNames = new string[propertyDescriptorCollection.Count];

for (int i = 0; i < propertyDescriptorCollection.Count; i++)
{
string name = propertyDescriptorCollection[i].Name;
columnNames[i] = name;
}
}
/// <summary>
/// 显示下拉框的时候出发
/// </summary>
/// <param name="e"></param>
protected override void OnDropDown(EventArgs e)
{
base.OnDropDown(e);
this.DropDownWidth =  (int)CalculateTotalWidth();//计算下拉框的总宽度
}

private float CalculateTotalWidth()
{
columnPadding = 5;
float totalWidth = 0;
foreach (int width in columnWidths)
{
totalWidth += (width + columnPadding);
}
//总宽度加上垂直滚动条的宽度
return totalWidth + SystemInformation.VerticalScrollBarWidth;
}
/// <summary>
/// 获取各列的宽度和项的总宽度
/// </summary>
/// <param name="e"></param>
protected override void OnMeasureItem(MeasureItemEventArgs e)
{
base.OnMeasureItem(e);
if (DesignMode)
{
return;
}
InitializeColumns();
for (int i = 0; i < columnNames.Length; i++)
{
string item = Convert.ToString(FilterItemOnProperty(Items[e.Index], columnNames[i]));
SizeF sizeF = e.Graphics.MeasureString(item, Font);//返回显示项字符串的大小
columnWidths[i] = Math.Max(columnWidths[i], sizeF.Width);
}
float totalWidth = CalculateTotalWidth();//计算combobox下拉框项的宽度
e.ItemWidth = (int)totalWidth;//设置下拉框项的宽度
}
/// <summary>
/// 绘制下拉框的内容
/// </summary>
/// <param name="e"></param>
protected override void OnDrawItem(DrawItemEventArgs e)
{
base.OnDrawItem(e);

if (DesignMode)
{
return;
}
Rectangle boundsRect = e.Bounds;//获取绘制项边界的矩形
//e.DrawBackground();
e.Graphics.FillRectangle(Brushes.Bisque, e.Bounds);
if ((e.State & DrawItemState.Focus) == 0)
{
//设置鼠标悬浮ComboBox的item的背景色
e.Graphics.FillRectangle(Brushes.White, e.Bounds);
}
int lastRight = 0;
using (Pen linePen = new Pen(SystemColors.GrayText))
{
using (SolidBrush brush = new SolidBrush(ForeColor))
{
if (columnNames.Length == 0)
{
e.Graphics.DrawString(Convert.ToString(Items[e.Index]), Font, brush, boundsRect);
}
else
{
//循环各列
for (int i = 0; i < columnNames.Length; i++)
{
string item = Convert.ToString(FilterItemOnProperty(Items[e.Index], columnNames[i]));
boundsRect.X = lastRight;//列的左边位置
boundsRect.Width =  (int)columnWidths[i] + columnPadding;//列的宽度
lastRight = boundsRect.Right;
//绘制项的内容
e.Graphics.DrawString(item, Font, brush, boundsRect);
//绘制各项间的竖线
if (i < columnNames.Length - 1)
{
e.Graphics.DrawLine(linePen, boundsRect.Right, boundsRect.Top, boundsRect.Right, boundsRect.Bottom);
}
}
}
}
}
e.DrawFocusRectangle();

}

上述代码没有什么亮点，稍微了解点GDI+的都能看懂，而且有很丰富的注释。就不一一解释了。

显示多列的核心其实就是根据数据源传入的数据，循环每个属性(列) 并且用“|”分开罢了。具体操作见上图中重写的OnDrawItem事件。

其中让我耗时的操作是如下这段代码：

//e.DrawBackground();
e.Graphics.FillRectangle(Brushes.Bisque, e.Bounds);
if ((e.State & DrawItemState.Focus) == 0)
{
//设置鼠标悬浮ComboBox的item的背景色
e.Graphics.FillRectangle(Brushes.White, e.Bounds);
}

鼠标悬浮到ComboBox的item的背景色， 其实直接可以调用e.DrawBackground()方法即可，默认的是深蓝色。因为我字体显示的是黑色，加上深蓝背景色后，列表项看起来很费神。

所以苦思冥想，反复测试，最后才发现可以用DrawItemState.Focus来判断鼠标悬浮到哪个Item(鼠标焦点)的位置，然后用喜欢的颜色填充当前的小矩形，鼠标焦点离开时再恢复原来的背景色即可。（如果不想这么处理，也可以用第一种方法，换个字体颜色就行了）

回到窗体，重新定义窗体设计器的代码InitializeComponent()

首先，深呼吸，扎下马步，气运丹田，一鼓作气使出 拖控件大法 ，将ComboBox拖入到窗体中，这样VS会自动在窗体设计器中新增窗体所有控件的设计代码。

InitializeComponent()方法很熟悉吧，随便新建一个窗体，后台代码都会自动生成这个方法，根据控件的位置、大小等属性添加设计代码。

但是，我们要做的是重写ComboBox，所以InitializeComponent()方法，我们需要做些改动。 我的做法是：双击窗体的Designer.cs文件，进去把InitializeComponent()方法直接剪切出来，放到窗体的.cs文件中，然后修改代码将ComboBox的实例化对象指向我们新建的组件类。具体操作如下代码：

this.components = new System.ComponentModel.Container();
this.MyComboBox1 = new TTTT.MyComboBox(this.components); //实例化对象指定到我们绘制的组件类
this.SuspendLayout();
//
// MyComboBox1
//
this.MyComboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawVariable;
this.MyComboBox1.DropDownStyle = System.Windows.Forms.ComboBoxStyle.DropDownList;
this.MyComboBox1.FormattingEnabled = true;
this.MyComboBox1.Location = new System.Drawing.Point(6, 22);
this.MyComboBox1.Name = "MyComboBox1";
this.MyComboBox1.Size = new System.Drawing.Size(144, 21);
this.MyComboBox1.TabIndex = 0;
this.MyComboBox1.SelectedIndexChanged += new System.EventHandler(this.MyComboBox1_SelectedIndexChanged);

数据源绑定
绑定数据源的方式有很多中，DataTable、List<T>、string[]等数组都可以，本文演示DataTable 作为数据源进行绑定，代码如下：

DataTable dataTable = new DataTable("Student");

dataTable.Columns.Add("Number", typeof(String));
dataTable.Columns.Add("Name", typeof(String));
dataTable.Columns.Add("RealName", typeof(String));
dataTable.Columns.Add("UserName", typeof(String));
dataTable.Columns.Add("Address", typeof(String));
dataTable.Rows.Add(new String[] { "1", "James", "张三", "james.zhang", "长沙" });
dataTable.Rows.Add(new String[] { "2", "Mary", "李四", "mary.xu", "山东" });
dataTable.Rows.Add(new String[] { "3", "Jack", "王五", "jack.li", "台湾" });
dataTable.Rows.Add(new String[] { "4", "joy", "赵六", "joy.zhou", "济南" });
dataTable.Rows.Add(new String[] { "5", "jay", "钱七", "jay.ji", "美国" });
dataTable.Rows.Add(new String[] { "6", "stephen", "康忠鑫", "Stephen.Kang", "深圳" });
MyComboBox1.DataSource = dataTable;

效果图如下：



(如果您对图片中的公章水印的效果感兴趣，请见我上篇博文：《公用章水印工具》)

获取数据
说完数据绑定，自然要说如何获取到自己想要的数据了，否则华而不实，只能看不能用。 代码如下：

try
{
DataTable dt = MyComboBox1.DataSource as DataTable;
if (dt != null)
{
textBox1.Text = dt.Rows[MyComboBox1.SelectedIndex]["Name"].ToString();
textBox2.Text = dt.Rows[MyComboBox1.SelectedIndex]["RealName"].ToString();
textBox3.Text = dt.Rows[MyComboBox1.SelectedIndex]["UserName"].ToString();
textBox4.Text = dt.Rows[MyComboBox1.SelectedIndex]["Address"].ToString();
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}

添加ComboBox的SelectedIndexChanged事件，将如上代码添加进去即可。 最终效果图：



后语
一篇文章写了1个半小时，边写还边组织语言，不知道说清楚没有，如果对大家有帮助，将请点击下面的推荐吧! 千万别手软～

俗话说得好，您的支持，就是我写作的动力。 谢谢大家～ 睡觉

下载链接已更新，见博文尾端。

更新说明(时间：201306071122)

目前ComboBox中默认显示的是一整行的内容，按照日常的客户体验，需要显示用户定义的列，
解决方法：在MyComboBox组件类中，将ComboBoxStyle设置为ComboBoxStyle.DropDown，在数据绑定的时候，设置ComboBox的DisplayMember和ValueMember属性即可。

MyComboBox1.DisplayMember = "Name";
MyComboBox1.ValueMember = "Number";

但是，这样有个不好处就是，ComboBoxStyle.DropDown样式下， 无法获取鼠标选择行的焦点，所以DrawItem中

e.Graphics.FillRectangle(Brushes.Bisque, e.Bounds);
if ((e.State & DrawItemState.Focus) == 0)
{
//this code keeps the last item drawn from having a Bisque background.
e.Graphics.FillRectangle(Brushes.White, e.Bounds);
}

这段代码将无效，屏蔽此处代码，使用e.DrawBackground();即可恢复默认的深蓝色背景。 如果觉得字体和背景色看起来费神，可自定义字体颜色来匹配。

或者说如果有解决这个问题的方案，希望大家不吝赐教。谢谢

更新说明(时间：201307091553)
更新说明：

1、已经解决了06月07日字体颜色看起来费神的bug，只需要将0607的代码换成如下代码即可。

e.Graphics.FillRectangle(Brushes.White, e.Bounds);
if (e.State == DrawItemState.Selected)
{

e.Graphics.FillRectangle(Brushes.Bisque, e.Bounds);
}

2、新增支持筛选的功能，只需要重写Keypress事件即可。具体代码如下：

/// <summary>
/// 响应按键
/// </summary>
/// <param name="e"></param>
protected override void OnKeyPress(KeyPressEventArgs e)
{
int idx = -1;
string toFind;

if (!Char.IsControl(e.KeyChar))
{

toFind = Text.Substring(0, SelectionStart) + e.KeyChar;
idx = FindStringExact(toFind);

if (idx == -1)
{
idx = FindString(toFind);
}
else
{
// 精确匹配到字符后，隐藏下拉
DroppedDown = false;
}

if (idx != -1)
{
DroppedDown = true;//如果匹配到特殊的字符串，打开下拉
SelectedIndex = idx;//焦点指向对应行
SelectionStart = toFind.Length;
SelectionLength = Text.Length - SelectionStart;
}
else
{
// 如果没有找到录入的字符串，取消按键响应
e.KeyChar = (char)0;
}
}

if ((e.KeyChar == (char)(Keys.Back)) &&
(Convert.ToBoolean(SelectionStart)))
{
toFind = Text.Substring(0, SelectionStart - 1);
idx = FindString(toFind);

if (idx != -1)
{
SelectedIndex = idx;
SelectionStart = toFind.Length;
SelectionLength = Text.Length - SelectionStart;
}
}

e.Handled = true;
}

源码已经更新下载链接： 下载源码