WinForm程序,让ComboBox的项显示为图片和文字来提高用户体验。
主要实现方式为重写ComboBox的OnDrawItem方法,自己进行ComboBox项的绘制。
效果图:
实现步骤如下:
1.写一个类ComboBoxEx继承自ComboBox
2.在ComboBoxEx构造函数中添加默认属性
View Code
1 public ComboBoxEx() 2 { 3 DrawMode = DrawMode.OwnerDrawFixed; 4 DropDownStyle = ComboBoxStyle.DropDownList; 5 ItemHeight = 50; 6 Width = 200; 7 }
3.在ComboBoxEx类中添加内部类ItemEx
View Code
public class ItemEx { public ItemEx(string text, Image img) { Text = text; Image = img; } public string Text { get; set; } public Image Image { get; set; } public override string ToString() { return Text; } }
4.重写ComboBox的OnDrawItem方法
a.画鼠标选中时的边框,使选项有选中的状态以区别未选中的项
View Code
if ((e.State & DrawItemState.Selected) != 0) { //渐变画刷 LinearGradientBrush brush = new LinearGradientBrush(e.Bounds, Color.FromArgb(255, 251, 237), Color.FromArgb(255, 236, 181), LinearGradientMode.Vertical); //填充区域 Rectangle borderRect = new Rectangle(3, e.Bounds.Y, e.Bounds.Width - 5, e.Bounds.Height - 2); e.Graphics.FillRectangle(brush, borderRect); //画边框 Pen pen = new Pen(Color.FromArgb(229, 195, 101)); e.Graphics.DrawRectangle(pen, borderRect); } else { SolidBrush brush = new SolidBrush(Color.FromArgb(255, 255, 255)); e.Graphics.FillRectangle(brush, e.Bounds); }
b.绘制图片
View Code
//获得项图片,绘制图片 ItemEx item = (ItemEx)Items[e.Index]; Image img = item.Image; //图片绘制的区域 Rectangle imgRect = new Rectangle(6, e.Bounds.Y + 3, 45, 45); e.Graphics.DrawImage(img, imgRect);
c.绘制文本
View Code
//文本内容显示区域 Rectangle textRect = new Rectangle(imgRect.Right + 2, imgRect.Y, e.Bounds.Width - imgRect.Width, e.Bounds.Height - 2); //获得项文本内容,绘制文本 String itemText = Items[e.Index].ToString(); //文本格式垂直居中 StringFormat strFormat = new StringFormat(); strFormat.LineAlignment = StringAlignment.Center; e.Graphics.DrawString(itemText, new Font("微软雅黑", 12), Brushes.Black, textRect, strFormat);
至此PictureComboBox已完成!
整个代码如下:
View Code
public class ComboBoxEx : ComboBox { public ComboBoxEx() { DrawMode = DrawMode.OwnerDrawFixed; DropDownStyle = ComboBoxStyle.DropDownList; ItemHeight = 50; Width = 200; } protected override void OnDrawItem(DrawItemEventArgs e) { if (Items.Count == 0||e.Index==-1) return; if ((e.State & DrawItemState.Selected) != 0) { //渐变画刷 LinearGradientBrush brush = new LinearGradientBrush(e.Bounds, Color.FromArgb(255, 251, 237), Color.FromArgb(255, 236, 181), LinearGradientMode.Vertical); //填充区域 Rectangle borderRect = new Rectangle(3, e.Bounds.Y, e.Bounds.Width - 5, e.Bounds.Height - 2); e.Graphics.FillRectangle(brush, borderRect); //画边框 Pen pen = new Pen(Color.FromArgb(229, 195, 101)); e.Graphics.DrawRectangle(pen, borderRect); } else { SolidBrush brush = new SolidBrush(Color.FromArgb(255, 255, 255)); e.Graphics.FillRectangle(brush, e.Bounds); } //获得项图片,绘制图片 ItemEx item = (ItemEx)Items[e.Index]; Image img = item.Image; //图片绘制的区域 Rectangle imgRect = new Rectangle(6, e.Bounds.Y + 3, 45, 45); e.Graphics.DrawImage(img, imgRect); //文本内容显示区域 Rectangle textRect = new Rectangle(imgRect.Right + 2, imgRect.Y, e.Bounds.Width - imgRect.Width, e.Bounds.Height - 2); //获得项文本内容,绘制文本 String itemText = Items[e.Index].ToString(); //文本格式垂直居中 StringFormat strFormat = new StringFormat(); strFormat.LineAlignment = StringAlignment.Center; e.Graphics.DrawString(itemText, new Font("微软雅黑", 12), Brushes.Black, textRect, strFormat); base.OnDrawItem(e); } /// <summary> /// 内部类 /// </summary> public class ItemEx { public ItemEx(string text, Image img) { Text = text; Image = img; } public string Text { get; set; } public Image Image { get; set; } public override string ToString() { return Text; } } }
5.测试
View Code
public Form1() { InitializeComponent(); comboBoxEx1.Items.Add(new PictureComboBox.ComboBoxEx.ItemEx("000000", Image.FromFile(Application.StartupPath + "\\0.gif"))); comboBoxEx1.Items.Add(new PictureComboBox.ComboBoxEx.ItemEx("111111", Image.FromFile(Application.StartupPath + "\\1.gif"))); comboBoxEx1.Items.Add(new PictureComboBox.ComboBoxEx.ItemEx("222222", Image.FromFile(Application.StartupPath + "\\2.gif"))); comboBoxEx1.Items.Add(new PictureComboBox.ComboBoxEx.ItemEx("333333", Image.FromFile(Application.StartupPath + "\\3.gif"))); }