Combo box Item source = ObservableCollection & I need a '-None-' dummy entry at the top

Question

I have a combo box using an observable collection as a datasource and I want a "dummy" value of "None" as the first item in the box as it controls filters against other data sources.

Other databound objects also use the same observable collection so adding a "None" value directly to the datasource is not possible as I dont want, for example, my datagrids having a "none" in them. Also I'd rather avoid filters to just remove the "none" value for those that do not use it, as I'd like the observable collection to direclty reflect the database data; if at all possible. I'd also like to avoid having one observable collection per databound control.

What I'm really after is a was to put a, non data bound, first entry into a combobox while also having the item source pointed at an obervable collection.

Thanks

/EDIT: XAML I'm now using but it does not shut the combo box when the dummy first item is clicked

<ComboBox x:Class="TestManager.Controls.NullableComboBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:w="clr-namespace:System.Windows.Controls;assembly=PresentationFramework"
         xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" MouseUp="ComboBox_MouseUp">
<ComboBox.Resources>
    <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>
    <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
                        <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                            <Path x:Name="Arrow" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>
                        </Grid>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="ComboBoxMessageTemplate" TargetType="{x:Type ComboBox}">
        <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
            </Grid.ColumnDefinitions>
            <Popup x:Name="PART_Popup" Margin="1" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">
                <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}" Color="Transparent">
                    <Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
                       <ScrollViewer CanContentScroll="true">
                                <StackPanel>
                                    <TextBlock x:Name="SelectMessage" HorizontalAlignment="Left" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" VerticalAlignment="Center" Margin="{TemplateBinding Padding}" Visibility="Visible"/>
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
                                </StackPanel>
                            </ScrollViewer>
                    </Border>
                </Microsoft_Windows_Themes:SystemDropShadowChrome>
            </Popup>
            <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="SelectedItem" Value="{x:Null}">
                <Setter Property="Visibility" TargetName="SelectMessage" Value="Visible"/>
            </Trigger>                
            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
            </Trigger>
            <Trigger Property="HasItems" Value="false">
                <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                <Setter Property="Background" Value="#FFF4F4F4"/>
            </Trigger>
            <Trigger Property="IsGrouping" Value="true">
                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ComboBox.Resources>

score 2 · Answer 1 · answered Apr 30 '10 at 04:03

You could wrap the ObservableCollection, which would allow you to use ComboBox unmodified. The wrapper would look something like this:

class PrefixedObservableCollection<T> : Collection<T>, INotifyCollectionChanged, INotifyPropertyChanged
{
    private readonly ObservableCollection<T> _wrappedCollection;
    private readonly T _prefix;

    public IEnumerator<T> GetEnumerator()
    {
        yield return _prefix;
        foreach (T item in _wrappedCollection)
            yield return item;
    }

    // ...  Implement interfaces, etc. Forward along change notifications from wrapped collection.
}

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

Will this help you 'Default' text for templated combo box

edited May 23 '17 at 12:19

Community

1
1

answered Apr 13 '10 at 12:02

Amsakanna

12,254
8
46
58

Thanks. That's got me part way there. Now I need to force the drop down to close when the dummy item is clicked... Any ideas ? – James Apr 13 '10 at 13:26
I had to use the first one in that linked post as the second relies on modifying the itemsource. So i now (with some modification) have a textblock in my dropdown that when selected sets the selected index to -1 .... But clicking it doesnt make the combo box collapse. – James Apr 13 '10 at 15:25
Can you post the complete xaml of your working version? You can edit your post. – Amsakanna Apr 13 '10 at 15:39
Thanks: The above post has been edited to the xaml. The part I changed was to put the textblock above the 'item presenter' to give me a dummy first entry. Though clicking it doesn't close the list; I have added codebehind to set the selected index to -1. – James Apr 14 '10 at 05:20
You can instead change the selectedIndex in a trigger. But the textblock does not have any property raised when it is clicked. Fortunately Button has an isPressed property. You can replace the textblock by a button and change its appearance accordingly to make use of the isPressed property if at all you wanted to avoid codebehind in this case. – Amsakanna Apr 15 '10 at 10:08
Did you try to set the ComboBox's IsDropDownOpen property to false to have it close when the 'none' text is clicked? – Fyodor Soikin Apr 19 '10 at 21:50

Combo box Item source = ObservableCollection & I need a '-None-' dummy entry at the top

2 Answers2