当前位置：首页 > news >正文

让ComboBox显示图片--PictureComboBox

news 来源：原创 2024/4/25 4:41:54

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")));
        }