Click here to Skip to main content
Click here to Skip to main content

An OwnerDraw ComboBox with CheckBoxes in the Drop-Down

, 24 May 2007
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 PinmemberGirish Nama3-Dec-13 18:39 
QuestionHow can I keep the combo box open after clicknig ? PinmemberAsfK3-Jun-13 20:00 
AnswerRe: How can I keep the combo box open after clicknig ? PinmemberDerek Viljoen4-Jun-13 2:31 
QuestionDataGridViewComboBoxCell C# PinmemberDonald Allen21-Apr-13 11:16 
QuestionCannot open project in vs 2008 PinmemberWhy so Serious7-Oct-12 23:42 
AnswerRe: Cannot open project in vs 2008 PinmemberDerek Viljoen16-Oct-12 6:41 
GeneralVisual Studio Version PinmemberKatalin Kalman7-Dec-10 4:51 
GeneralRe: Visual Studio Version PinmemberDerek Viljoen7-Dec-10 6:46 
GeneralRe: Visual Studio Version PinmemberKatalin Kalman8-Dec-10 3:39 
GeneralRe: left align text Pinmemberonly_wojtazz@o2.pl13-Feb-09 0:21 
Generalmulti-select PinmemberMember 385422518-Aug-08 14:11 
GeneralRe: multi-select PinmemberStelios Alexandrakis20-Nov-08 6:06 
QuestionKeep dropdown open [modified] PinmemberMassalla9-Aug-07 20:42 
AnswerRe: Keep dropdown open PinmemberDerek Viljoen10-Aug-07 2:07 
GeneralRe: Keep dropdown open PinmemberMassalla10-Aug-07 8:48 
Questionleft align text PinmemberTasneemJ26-Jun-07 0:41 
AnswerRe: left align text PinmemberDerek Viljoen26-Jun-07 2:28 
GeneralRe: left align text PinmemberTasneemJ26-Jun-07 2:51 
GeneralRe: left align text PinmemberDerek Viljoen26-Jun-07 3:15 
GeneralRe: left align text Pinmemberpavvel31-Jul-07 3:55 
GeneralRe: left align text PinmemberDerek Viljoen31-Jul-07 4:03 
GeneralRe: left align text PinmemberJozef Benikovsky23-Aug-07 21:58 
Generala couple suggestions PinmemberSebrell2-Jun-07 14:01 

First, I commend your excellent idea. I wanted to make a couple suggestions as well.
 
You might consider overriding the OnDrawItem(DrawItemEventArgs e) method instead of writing a separate event-handling method for the DrawItem event. It generally results in faster performance. Just make sure you include a call to base.OnDrawItem(e); to ensure the event is raised.
 
Also, the ComboBox control includes a DropDownStyle property, of type ComboBoxStyle, which contains three values, of which ComboBoxStyle.DropDownList prevents users from being able to edit list items.
 
Hope this helps.Smile | :)

GeneralRe: a couple suggestions PinmemberSyed Moshiur Murshed15-Jun-07 1:27 
GeneralRe: a couple suggestions PinmemberEwino27-Feb-08 18:23 

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 | Mobile
Web04 | 2.8.141015.1 | Last Updated 24 May 2007
Article Copyright 2007 by Derek Viljoen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid