[Tips] How to display images in ComboBox in C#

Welcome Back!, If you had working with combo box in C#, you can easy add items into it by command: cb.Items.add(), but if you want to every item add to combo box control
Today I will show you how to customize combo box Control, so you can add image to combo box in C#.

Here is my example:
Add 6 items into combo box with image on the first item.

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

Oke, now we do it
First add my exe from here to your projects or you can create your form with ImageComboBox source code to your projects, same as below action

Create ImageComboBox

/*
 * Develper: Zidane (huuvi168@gmail.com)
 * Last modified: 2015-12-25
 */

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ImageComboBox
{
    public class ImageComboBox : ComboBox
    {
        private ImageList mImageList = null;

        public ImageComboBox()
        {
            this.DrawMode = DrawMode.OwnerDrawFixed;
        }

        public ImageList ImageList
        {
            get { return mImageList; }
            set { mImageList = value; }
        }

        protected override void OnDrawItem(
                     System.Windows.Forms.DrawItemEventArgs e)
        {
            base.OnDrawItem(e);

            e.DrawBackground();
            e.DrawFocusRectangle();

            if (e.Index >= 0)
            {

                if (this.Items[e.Index] is ImageComboItem)
                {
                    if (mImageList != null)
                    {
             ImageComboItem CurrItem = (ImageComboItem)this.Items[e.Index];

                        if (CurrItem.ImageIndex != -1)
                        {
             this.ImageList.Draw(e.Graphics, e.Bounds.Left, e.Bounds.Top, 
                                                          CurrItem.ImageIndex);
             e.Graphics.DrawString(CurrItem.Text, CurrItem.Font,
                   new SolidBrush(CurrItem.ForeColor),
                   e.Bounds.Left + mImageList.ImageSize.Width, e.Bounds.Top);
                        }
                        else
                        {
            e.Graphics.DrawString(CurrItem.Text, CurrItem.Font,
                   new SolidBrush(CurrItem.ForeColor),
                   e.Bounds.Left + mImageList.ImageSize.Width, e.Bounds.Top);
                        }
                    }
                }
                else
                {
            e.Graphics.DrawString(this.Items[e.Index].ToString(), e.Font, 
                   new SolidBrush(e.ForeColor), e.Bounds.Left, e.Bounds.Top);
                }
            }
        }
    }
    
    public class ImageComboItem
    {
        private Color mForeColor = Color.Black;
        private int mImageIndex = -1;
        private object mTag = null;
        private string mText = "";
        private Font mFont;

        public ImageComboItem(string Text, Font Font, Color ForeColor)
        {
            mText = Text;
            mFont = Font;
            mForeColor = ForeColor;
        }

        public ImageComboItem(string Text, Font Font, 
                               Color ForeColor, int ImageIndex)
        {
            mText = Text;
            mFont = Font;
            mForeColor = ForeColor;
            mImageIndex = ImageIndex;
        }

        public Color ForeColor
        {
            get { return mForeColor; }
            set { mForeColor = value; }
        }

        public int ImageIndex
        {
            get { return mImageIndex; }
            set { mImageIndex = value; }
        }

        public object Tag
        {
            get { return mTag; }
            set { mTag = value; }
        }

        public string Text
        {
            get { return mText; }
            set { mText = value; }
        }

        public Font Font
        {
            get { return mFont; }
            set { mFont = value; }
        }

        public override string ToString()
        {
            return mText;
        }
    }
}

And then use add References of this exe to your projects (here my auto Phong Than Projects) :d

After you can easy use it same as default combo box in CSharp. Set imagebox control name is cmbPKSkill. View the code

/*
 * Develper: Zidane (huuvi168@gmail.com)
 * Last modified: 2015-12-25
 */
private void demo()
{         
    this.cmbPKSkill.ImageList = this.imageListGS;
    string[] ArrSkillGS = clsCharacter.getSkillGS();
    for (int i = 0; i < ArrSkillGS.Length; i++)
    {
      this.cmbPKSkill.Items.Add(new ImageComboBox.ImageComboItem(ArrSkillGS[i],
          new Font("Verdana", 9), Color.Black, i));
    }
    cmbPKSkill.SelectedIndex = 0;
}

Thank you for reading this post. I hope you found it helpful and easy to follow. If you have any feedback or questions about How to Use Image ComboBox Control with C# , please share them in the comments below. I would love to hear from you and discuss this topic further

✋✋✋✋  Webzone Tech Tips, all things Tech Tips for web development  - I am Zidane, See you next time soon ✋✋✋✋