Adding Filter TextBox to a ComboBox using MVVM in WPF

Question

What I am trying to do is create a ComboBox where at the top there is a textbox that I can type into to filter the items within the ComboBox. Here is a an example of what I mean:

I need to do this using an MVVM approach. I am not sure how to go about this or how to overwrite the style to do so. I have looked on google for several solutions but none of them are quite exactly what I need. I am pretty sure once I have the style created I can figure out the filtering portion within my view model.

Any help would be appreciated.

Possible duplicate of [Dynamic filter of WPF combobox based on text input](https://stackoverflow.com/questions/2001842/dynamic-filter-of-wpf-combobox-based-on-text-input) — DonBoitnott, Oct 10 '18 at 13:52
So you are trying to implement an autocomplete ComboBox in other words? How is this related to MVVM? — mm8, Oct 10 '18 at 14:09

score 6 · Accepted Answer · answered Oct 10 '18 at 13:28

6

Use IsTextSearchEnabled from the ComboBox control like this:

<ComboBox IsTextSearchEnabled="True" IsTextSearchCaseSensitive="True or False depending on your scenario" />

answered Oct 10 '18 at 13:28

Juan Carlos Rodriguez

774
3
23

1

Don't forget `IsEditEnabled=true` as well. – DonBoitnott Oct 10 '18 at 13:31
Yep, my bad there – Juan Carlos Rodriguez Oct 10 '18 at 13:32
Wow that was a lot easier than I thought. – Selthien Oct 10 '18 at 13:34
If it helped you don't forget to mark it as the answer :) – Juan Carlos Rodriguez Oct 10 '18 at 13:35
1

Actually this is close but not quite. I want to actually filter the items not search for them. – Selthien Oct 10 '18 at 13:39

score 1 · Answer 2 · answered Oct 10 '18 at 13:56

In my projects, when I do something like this, I add a TextBox as the first item in the dropdown content template, with a presenter following it of the items that need to be data-bound.

 <ComboBox>
    <ComboBox.ItemTemplate>
      <DataTemplate>
        <StackPanel Orientation="Horizontal">
        <TextBox Text="{Binding Path=FilteredText"} Mode="TwoWay"/>
        <ListBox ItemSource="{Binding Path=ItemsForBinding}" Mode="TwoWay" NotifyOnSourceUpdated="True" />
        </StackPanel>
      </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

And in your view-model, make sure that NotifyOnProperyChanged is enabled for the FilteredText property when it is updated, it will trigger the "removal" of the bound-items, I usually use ObservableCollection, but I know ListCollectionView has capabilities to filter and notifies the UI when the collection changes. You can even find a 3rd party text AutoCompleteBox ( I use Telerik,) and it would allow you to prepopulate the terms in the "textbox" that you want the user to be able to filter.

Adding Filter TextBox to a ComboBox using MVVM in WPF

2 Answers2