Unselecting a Silverlight combobox: How to unring the bell?

Download demo project: ComboboxUnselect 

Download action: ComboBoxUnselectAction.zip 

Before I start I’d like to tell you that in my humble opinion a combobox (or dropdown list) should contain values of the same kind. No value should mean something completely different than all the other items.
I also think a combobox should always have a default value selected. Like a checkbox should be checked or unchecked. Not gray-checked.  

Yeah yeah…

Fortunately no-one is waiting for my opinion :-) and the first item of a combobox is often used to offer a not-selected value to the user, like “<no selection>” or “Choose product”. Let’s call this the NULL-value.
To offer this value you can add the NULL value in the source list that feeds the combobox or write some behavior that adds the NULL value at position 0 in the combobox. Both methods work but can cause some unpredictable behavior. What is a null item in a list of employees? What is an empty comboboxItem in a combobox with employees?  

How would the user like to clear the combobox?

Today I needed to filter a list. I created a combobox and a grid and when I select a comboboxitem, the ItemSource of the grid is nicely filtered.
But to clear the filter I needed a way to unselect the combobox. And while it’s not hard to do this technically, I wondered what was the best way from a user’s point of view.
A quick google showed me a few popular methods:  

• Link a checkbox to the combobox. If the checkbox is unchecked, the SelectedItem of the combobox is set to NULL and the combobox is grayed out.
• Add a first dummy value like “<no selection>” at position 0 of the combobox.

The first method needs 3 clicks: Check checkbox, Click combobox arrow down, Click item.
The second method has that tricky unpredictable first item.
I know that I can inspect my list with reflection and see what kind of list it is and add an item of the same type but I got tired even thinking of needing so much code.
And I don’t want to give meaning to a -1 or 0 selectedIndex.  

My luck was that I’m working with Silverlight/MVVM. Due to the many failures I make, I often noticed that a Combobox.SelectedItem=null results in a nice blank combobox.
So let’s use that! I wrote a demo project that has a list of employees wich populate a combobox. I put a button on the page and dropped a ComboBoxUnselectAction on it.  

You can see it here in action:

  The ComboBoxUnselectAction has a dependency property to target the Combobox:  

[CustomPropertyValueEditor(CustomPropertyValueEditor.ElementBinding)]
public ComboBox TargetComboBox
{
    get { return (ComboBox)GetValue(TargetComboBoxProperty); }
    set { SetValue(TargetComboBoxProperty, value); }
}

public static readonly DependencyProperty TargetComboBoxProperty =
    DependencyProperty.Register("TargetComboBox",
                                typeof(ComboBox),
                                typeof(ComboBoxUnselectAction),
                                new PropertyMetadata(null, OnTargetComboBoxPropertyChanged));

private static void OnTargetComboBoxPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var source = d as ComboBoxUnselectAction;
    if (source != null)
    {
        var value = (ComboBox)e.NewValue;
    }
}

And an implementation of the Invoke method:

protected override void Invoke(object o)
{
    if (this.TargetComboBox != null)
        this.TargetComboBox.SelectedItem = null;
}

NullableCombobox usercontrol

If you want to take it one step beyond you can create a usercontrol that holds the combobox and NULL-button. You could even show a “Choose artist” label on top of the combobox if the SelectedItem==null. But if the ComboBoxUnselectAction is just what you are looking for, just download ComboBoxUnselectAction.zip