Why can't I select a null value in a ComboBox? Why can't I select a null value in a ComboBox? wpf wpf

Why can't I select a null value in a ComboBox?


Well I recently ran into the same problem with null value for ComboBox.I've solved it by using two converters:

  1. For ItemsSource property: it replaces null values in the collection by any value passed inside converter's parameter:

    class EnumerableNullReplaceConverter : IValueConverter{    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)    {        var collection = (IEnumerable)value;        return            collection            .Cast<object>()            .Select(x => x ?? parameter)            .ToArray();    }    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)    {        throw new NotSupportedException();    }}
  2. For SelectedValue property: this one does the same but for the single value and in two ways:

    class NullReplaceConverter : IValueConverter{    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)    {        return value ?? parameter;    }    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)    {        return value.Equals(parameter) ? null : value;    }}

Example of use:

<ComboBox     ItemsSource="{Binding MyValues, Converter={StaticResource EnumerableNullReplaceConverter}, ConverterParameter='(Empty)'}"     SelectedValue="{Binding SelectedMyValue, Converter={StaticResource NullReplaceConverter}, ConverterParameter='(Empty)'}"    />

Result:

enter image description here

Note:If you bind to ObservableCollection then you will lose change notifications. Also you don't want to have more than one null value in the collection.


The null "item" is not being selected by the keyboard at all - rather the previous item is being unselected and no subsequent item is (able to be) selected. This is why, after "selecting" the null item with the keyboard, you are thereafter unable to re-select the previously selected item ("Hello") - except via the mouse!

In short, you can neither select nor deselect a null item in a ComboBox. When you think you are doing so, you are rather deselecting or selecting the previous or a new item.

This can perhaps best be seen by adding a background to the items in the ComboBox. You will notice the colored background in the ComboBox when you select "Hello", but when you deselect it via the keyboard, the background color disappears. We know this is not the null item, because the null item actually has the background color when we drop the list down via the mouse!

The following XAML, modified from that in the original question, will put a LightBlue background behind the items so you can see this behavior.

<Window x:Class="WpfApplication1.Window1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Window1" Height="300" Width="300">    <StackPanel>        <ComboBox x:Name="bars" Height="21" SelectedItem="{Binding Bar}">            <ComboBox.ItemTemplate>                <DataTemplate>                    <Grid Background="LightBlue" Width="200" Height="20">                        <TextBlock Text="{Binding Name}" />                    </Grid>                </DataTemplate>            </ComboBox.ItemTemplate>        </ComboBox>    </StackPanel></Window>

If you want further validation, you can handle the SelectionChanged event on the ComboBox and see that "selecting the null item" actually gives an empty array of AddedItems in its SelectionChangedEventArgs, and "deselecting the null item by selecting 'Hello' with the mouse" gives an empty array of RemovedItems.


I got a new solution for this question. "USING Mahapps"

  xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"  <ComboBox x:Name="bars"  **controls:TextBoxHelper.ClearTextButton="True"**              DisplayMemberPath="Name"               Height="21"               SelectedItem="{Binding Bar}"/>

enter image description here

enter image description here

You can use the close button to clear the content.

Thanks.