Click here to Skip to main content
11,479,841 members (47,606 online)
Click here to Skip to main content

An OwnerDraw ComboBox with CheckBoxes in the Drop-Down

, 24 May 2007 131.8K 7.6K 54
Rate this:
Please Sign up or sign in to vote.
An OwnerDraw ComboBox with CheckBoxes in the Drop-Down
Screenshot - DropDown.jpg

Introduction

I needed to add filtering to a list view. The list view already had a ToolStrip to which I could add the appropriate widget. I decided a drop-down ComboBox with CheckBoxes to turn items on and off was the most space-efficient, and intuitive way to implement it. However, this requires an owner-draw ComboBox. Fortunately, the .NET Framework as of 2.0 includes a helper class, CheckBoxRenderer, that will render the check box into the drop-down list for you, given the right parameters.

Using the Code

The first step was to subclass the System.Windows.Forms.ComboBox class:

public partial class CheckComboBox : ComboBox
{
    public CheckComboBox()
    {
        this.DrawMode = DrawMode.OwnerDrawFixed;
        ...
    }

    ...
}

Notice that I set the DrawMode property to tell the ComboBox that we intend to render the drop-down list items ourselves. The next step was to define a class to contain our drop-down list item data and maintain the state. This is a simple class:

public class CheckComboBoxItem
{
    public CheckComboBoxItem( string text, bool initialCheckState )
    {
        _checkState = initialCheckState;
        _text = text;
    }

    private bool _checkState = false;
    public bool CheckState
    {
        get { return _checkState; }
        set { _checkState = value; }
    }

    private string _text = "";
    public string Text
    {
        get { return _text; }
        set { _text = value; }
    }

    public override string ToString()
    {
        return "Select Options";
    }
}

Then we wire up a delegate to the ComboBox's DrawItem event:

this.DrawItem += new DrawItemEventHandler(CheckComboBox_DrawItem);

and implement it as follows:

void CheckComboBox_DrawItem( object sender, DrawItemEventArgs e )
{
    if (e.Index == -1)
    {
        return;
    }

    if( !( Items[ e.Index ] is CheckComboBoxItem ) )
    {
        e.Graphics.DrawString( 
            Items[ e.Index ].ToString(), 
            this.Font, 
            Brushes.Black, 
            new Point( e.Bounds.X, e.Bounds.Y ) );
        return;
    }

    CheckComboBoxItem box = (CheckComboBoxItem)Items[ e.Index ];

    CheckBoxRenderer.RenderMatchingApplicationState = true;
    CheckBoxRenderer.DrawCheckBox( 
        e.Graphics, 
        new Point( e.Bounds.X, e.Bounds.Y ), 
        e.Bounds, 
        box.Text, 
        this.Font, 
        ( e.State & DrawItemState.Focus ) == 0, 
        box.CheckState ? CheckBoxState.CheckedNormal : 
            CheckBoxState.UncheckedNormal );
}

In this delegate, the first thing we do is to verify that the item we are rendering was added as a CheckComboBoxItem. If it is not, we render it as a simple string. Otherwise, we get the appropriate CheckComboBoxItem from the Items collection (using the DrawItemEventArgs.Index property). Then we call the CheckBoxRenderer.DrawCheckBox() method, passing in the Graphics object, into which we want to render the CheckBox, and the location, size, text, font, focus and check states.

The result is that it will render our drop-down list items to look like check boxes:

Screenshot - DropDown.jpg

Next we want to toggle the check state when one of the items is selected. So we wire up another delegate, but this time to the SelectedIndexChanged event:

this.SelectedIndexChanged += 
    new EventHandler( CheckComboBox_SelectedIndexChanged );

and implement it as follows:

void CheckComboBox_SelectedIndexChanged( object sender, EventArgs e )
{
    CheckComboBoxItem item = (CheckComboBoxItem)SelectedItem;
    item.CheckState = !item.CheckState;
    ...
}

This allows us to toggle the check box in the drop-downs, but doesn't allow the user of this control to know that anything has happened. So we also add a public event to notify the control's users of a change to the check state of an item in the drop-down list:

public event EventHandler CheckStateChanged;

and we fire this event when we toggle the state above, so the full method looks like this:

void CheckComboBox_SelectedIndexChanged( object sender, EventArgs e )
{
    CheckComboBoxItem item = (CheckComboBoxItem)SelectedItem;
    item.CheckState = !item.CheckState;
    if (CheckStateChanged != null)
        CheckStateChanged(item, e);
}

Using the Control

To use the control, you simply add it to the container of your choice and add items to it like this:

checkComboBox1.Items.Add(new CheckComboBox.CheckComboBoxItem("One", true));
checkComboBox1.Items.Add(new CheckComboBox.CheckComboBoxItem("Two", true));
checkComboBox1.Items.Add(new CheckComboBox.CheckComboBoxItem("Three", true));

To get notifications that a check state has been changed by the user:

this.checkComboBox1.CheckStateChanged += 
    new EventHandler(this.checkComboBox1_CheckStateChanged);

That can be handled like this:

private void checkComboBox1_CheckStateChanged(object sender, EventArgs e)
{
    if (sender is CheckComboBox.CheckComboBoxItem)
    {
        CheckComboBox.CheckComboBoxItem item = 
            (CheckComboBox.CheckComboBoxItem)sender;
        ... 
    }
}
Screenshot - DropDownTest1.jpg
The finished sample application.

Screenshot - DropDownTest2.jpg
The drop-down.

Points of Interest

There was one annoyance that I'm sure there's a better solution to than the one I came up with. I'd like the TextBox portion of the control to contain fixed text and not be editable. So, as a stop-gap I initialize it to the string "Select Options" and override the CheckComboBoxItem class' ToString() method to always return that same string. This way, whichever item the user selects last, the string never changes. This does not make it non-editable.

There are many additions I'd like to make as time permits:

  • Correctly align the text so it left-justifies (need to find out how to calculate the width of the check box bitmap to do this correctly)
  • Add "Select All" and "Select None" items with a separator to the top of the drop-down
  • Allow other control types into the drop-down (e.g. - radio buttons)

History

  • 24th May, 2007: Original version posted

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Derek Viljoen
Software Developer (Senior)
United States United States
Developer with over twenty years of coding for profit, and innumerable years before that of doing it at a loss.

Comments and Discussions

 
GeneralThank you Pin
Girish Nama3-Dec-13 19:39
memberGirish Nama3-Dec-13 19:39 
QuestionHow can I keep the combo box open after clicknig ? Pin
AsfK3-Jun-13 21:00
memberAsfK3-Jun-13 21:00 
AnswerRe: How can I keep the combo box open after clicknig ? Pin
Derek Viljoen4-Jun-13 3:31
memberDerek Viljoen4-Jun-13 3:31 
QuestionDataGridViewComboBoxCell C# Pin
Donald Allen21-Apr-13 12:16
memberDonald Allen21-Apr-13 12:16 
QuestionCannot open project in vs 2008 Pin
Why so Serious8-Oct-12 0:42
memberWhy so Serious8-Oct-12 0:42 
AnswerRe: Cannot open project in vs 2008 Pin
Derek Viljoen16-Oct-12 7:41
memberDerek Viljoen16-Oct-12 7:41 
GeneralVisual Studio Version Pin
Katalin Kalman7-Dec-10 5:51
memberKatalin Kalman7-Dec-10 5:51 
GeneralRe: Visual Studio Version Pin
Derek Viljoen7-Dec-10 7:46
memberDerek Viljoen7-Dec-10 7:46 
GeneralRe: Visual Studio Version Pin
Katalin Kalman8-Dec-10 4:39
memberKatalin Kalman8-Dec-10 4:39 
GeneralRe: left align text Pin
only_wojtazz@o2.pl13-Feb-09 1:21
memberonly_wojtazz@o2.pl13-Feb-09 1:21 
Generalmulti-select Pin
Member 385422518-Aug-08 15:11
memberMember 385422518-Aug-08 15:11 
GeneralRe: multi-select Pin
Stelios Alexandrakis20-Nov-08 7:06
memberStelios Alexandrakis20-Nov-08 7:06 
QuestionKeep dropdown open [modified] Pin
Massalla9-Aug-07 21:42
memberMassalla9-Aug-07 21:42 
AnswerRe: Keep dropdown open Pin
Derek Viljoen10-Aug-07 3:07
memberDerek Viljoen10-Aug-07 3:07 
GeneralRe: Keep dropdown open Pin
Massalla10-Aug-07 9:48
memberMassalla10-Aug-07 9:48 
Questionleft align text Pin
TasneemJ26-Jun-07 1:41
memberTasneemJ26-Jun-07 1:41 
AnswerRe: left align text Pin
Derek Viljoen26-Jun-07 3:28
memberDerek Viljoen26-Jun-07 3:28 
GeneralRe: left align text Pin
TasneemJ26-Jun-07 3:51
memberTasneemJ26-Jun-07 3:51 
I tried to determine the width of the checkbox, but couldn't find any info. So I hacked it similar to yours:

CheckBoxRenderer.DrawCheckBox(
e.Graphics,
new Point(e.Bounds.X, e.Bounds.Y),
new Rectangle(new Point(e.Bounds.X + 13, e.Bounds.Y), new Size(e.Bounds.Width, e.Bounds.Height)),
box.Text,
this.Font,
TextFormatFlags.Left,
(e.State & DrawItemState.Focus) == 0,
box.CheckState ? CheckBoxState.CheckedNormal : CheckBoxState.UncheckedNormal);

Sigh | :sigh:

Another question, since this is a multi-select, do you know how to keep the dropdown list open until the user clicks outside the control or collapses it by clicking the dropdown button again??? Similar to the old C++ control written here: http://www.codeproject.com/combobox/checkcombo.asp

Thanks for your input.
GeneralRe: left align text Pin
Derek Viljoen26-Jun-07 4:15
memberDerek Viljoen26-Jun-07 4:15 
GeneralRe: left align text Pin
pavvel31-Jul-07 4:55
memberpavvel31-Jul-07 4:55 
GeneralRe: left align text Pin
Derek Viljoen31-Jul-07 5:03
memberDerek Viljoen31-Jul-07 5:03 
GeneralRe: left align text Pin
Jozef Benikovsky23-Aug-07 22:58
memberJozef Benikovsky23-Aug-07 22:58 
Generala couple suggestions Pin
Sebrell2-Jun-07 15:01
memberSebrell2-Jun-07 15:01 
GeneralRe: a couple suggestions Pin
Syed Moshiur Murshed15-Jun-07 2:27
memberSyed Moshiur Murshed15-Jun-07 2:27 
GeneralRe: a couple suggestions Pin
Ewino27-Feb-08 19:23
memberEwino27-Feb-08 19:23 
GeneralRe: a couple suggestions Pin
help desk10-Jul-08 21:24
memberhelp desk10-Jul-08 21:24 
GeneralRe: a couple suggestions Pin
Ewino11-Jul-08 0:41
memberEwino11-Jul-08 0:41 
GeneralRe: a couple suggestions Pin
carlos_hgo3-Apr-09 13:58
membercarlos_hgo3-Apr-09 13:58 
GeneralRe: a couple suggestions Pin
pennidren25-Jun-09 17:22
memberpennidren25-Jun-09 17:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 24 May 2007
Article Copyright 2007 by Derek Viljoen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid