Creating Multi Column ComboBox in .NET

Recently I was working on an assignment wherein I had to create a Custom ComboBox to display multiple columns when it is dropped down. Something similar to below image.

The actual assignmet was little more complex than the one I have shown in the above image. Anyways, if you look at the image, you will also find the combo box pretty useful as it can display data in column manner like FirstName-LastName, Name-Place etc. So, if you like it, you can design it yourself. All you have to do is, create class that inherits ComboBox, set the DrawMode property to OwnerDrawFixed, override OnDrawItem method to draw the columns manually.

Sounds simple, isn't it? Now, how do we supply items to this ComboBox? If we have to display an item in multicolumn fashion, ideally the item must be composite one i.e. a Dictionary<T, T> or a class with 2 instance members. Since ComboBox's Items property is a collection of objects, we can place anything into it. This has got both advantage as well as disadvantages.   Advantage is we can place object of our custom class into ComboBox while the disadvantage is user can enter any kind of item which cannot be represented in the way we need to display it.

Ok, all that said, I will create a class whose instances we are going to place in the combo box. I will call this class as XComboItem (X stands for Extended).

public class XComboItem

{

    public String DisplayName { get; set; }

    public Object Value { get; set; }

    public String Description { get; set; }

}

So, this is the class, whose objects we are going to place in out custom combo Box. I will name the combo as XComboBox.

public partial class XComboBox : ComboBox

{

    private Int32 ColumnGap = 20;

    private Int32 firstColumnWidth;

    private Int32 secondColumnWidth;

    public XComboBox(): base()

    {

        DrawMode = DrawMode.OwnerDrawFixed;

        firstColumnWidth = DropDownWidth / 2;

        secondColumnWidth = DropDownWidth / 2;

    }

}

In this, firstColumnWidth and secondColumnWidth are the widths of both columns that I am going to display in combo dropdown list (in pixels). Column gap is gap between two columns.Initially I will set the column widths to half the width of DropDownWidth. The only major thing is to override OnDrawItem() function. By overriding this function, you can draw the items in DropDownList of the combobox in the way you want. You can display each item with different font, differen style or even add image to each item. In our case, we need to display DisplayItem & Description of XComboItem in two seperate columns. The logic is getting the drawing object of current item, then use DrawString method appropriately. So, here goes our OnDrawItem.

protected override void OnDrawItem(DrawItemEventArgs e)

{

    if (e.Index < 0)

    {

        return;

    }

    XComboItem item = (XComboItem)Items[e.Index];

    ColumnGap = firstColumnWidth == 0 ? 0 : ColumnGap;

    e.DrawBackground();

    e.DrawFocusRectangle();

    String first = item.DisplayName;

    String second = item.Description;

    while (TextRenderer.MeasureText(first, e.Font).Width > firstColumnWidth)

    {

        first = first.Substring(0, first.Length - 1);

    }

    Brush solidBrush = new SolidBrush(e.ForeColor);

    e.Graphics.DrawString(first, e.Font, solidBrush, e.Bounds.Left, e.Bounds.Top);

    e.Graphics.DrawString(second, e.Font, solidBrush, e.Bounds.Left + firstColumnWidth +

                          ColumnGap, e.Bounds.Top);

}

You can add any properties or methods to make the control more user friendly. So, That's it, our control is ready. To use, create the object of XComboItem and add the object to Items collection of XComboBox. Then run your application to see the effect.