Sep 24, 2010 0
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


