Dynamic filter of WPF combobox based on text input

I cant seem to find a direct method for implementing filtering of text input into a list of items in a WPF combobox.By setting IsTextSearchEnabled to true, the comboBox dropdown will jump to whatever the first matching item is. What I need is for the list to be filtered to whatever matches the text string (e.g. If I focus on my combobox and type 'abc', I'd like to see all the items in the ItemsSource collection that start with (or contain preferably) 'abc' as the members of the dropdown list).

I doubt that it makes a difference but my display item is templated to a property of a complex type :

<ComboBox x:Name="DiagnosisComboBox" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3" 
ItemsSource="{Binding Path = ApacheDxList,
UpdateSourceTrigger=PropertyChanged,
Mode=OneWay}"
IsTextSearchEnabled="True"
ItemTemplate="{StaticResource DxDescriptionTemplate}"
SelectedValue="{Binding Path = SelectedEncounterDetails.Diagnosis,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"/>

Thanks.

SOLUTION 1 :

I just did this a few days ago using a modified version of the code from this site: Credit where credit is due

My full code listed below:

using System.Collections;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Input;

namespace MyControls
{
public class FilteredComboBox : ComboBox
{
private string oldFilter = string.Empty;

private string currentFilter = string.Empty;

protected TextBox EditableTextBox => GetTemplateChild("PART_EditableTextBox") as TextBox;


protected override void OnItemsSourceChanged(IEnumerable oldValue, IEnumerable newValue)
{
if (newValue != null)
{
var view = CollectionViewSource.GetDefaultView(newValue);
view.Filter += FilterItem;
}

if (oldValue != null)
{
var view = CollectionViewSource.GetDefaultView(oldValue);
if (view != null) view.Filter -= FilterItem;
}

base.OnItemsSourceChanged(oldValue, newValue);
}

protected override void OnPreviewKeyDown(KeyEventArgs e)
{
switch (e.Key)
{
case Key.Tab:
case Key.Enter:
IsDropDownOpen = false;
break;
case Key.Escape:
IsDropDownOpen = false;
SelectedIndex = -1;
Text = currentFilter;
break;
default:
if (e.Key == Key.Down) IsDropDownOpen = true;

base.OnPreviewKeyDown(e);
break;
}

// Cache text
oldFilter = Text;
}

protected override void OnKeyUp(KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
case Key.Down:
break;
case Key.Tab:
case Key.Enter:

ClearFilter();
break;
default:
if (Text != oldFilter)
{
RefreshFilter();
IsDropDownOpen = true;

EditableTextBox.SelectionStart = int.MaxValue;
}

base.OnKeyUp(e);
currentFilter = Text;
break;
}
}

protected override void OnPreviewLostKeyboardFocus(KeyboardFocusChangedEventArgs e)
{
ClearFilter();
var temp = SelectedIndex;
SelectedIndex = -1;
Text = string.Empty;
SelectedIndex = temp;
base.OnPreviewLostKeyboardFocus(e);
}

private void RefreshFilter()
{
if (ItemsSource == null) return;

var view = CollectionViewSource.GetDefaultView(ItemsSource);
view.Refresh();
}

private void ClearFilter()
{
currentFilter = string.Empty;
RefreshFilter();
}

private bool FilterItem(object value)
{
if (value == null) return false;
if (Text.Length == 0) return true;

return value.ToString().ToLower().Contains(Text.ToLower());
}
}
}

And the WPF should be something like so:

<MyControls:FilteredComboBox ItemsSource="{Binding MyItemsSource}"
SelectedItem="{Binding MySelectedItem}"
DisplayMemberPath="Name"
IsEditable="True"
IsTextSearchEnabled="False"
StaysOpenOnEdit="True">

<MyControls:FilteredComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel VirtualizationMode="Recycling" />
</ItemsPanelTemplate>
</MyControls:FilteredComboBox.ItemsPanel>
</MyControls:FilteredComboBox>

A few things to note here. You will notice the FilterItem implementation does a ToString() on the object. This means the property of your object you want to display should be returned in your object.ToString() implementation. (or be a string already) In other words something like so:

public class Customer
{
public string Name { get; set; }
public string Address { get; set; }
public string PhoneNumber { get; set; }

public override string ToString()
{
return Name;
}
}

If this does not work for your needs I suppose you could get the value of DisplayMemberPath and use reflection to get the property to use it, but that would be slower so I wouldn't recommend doing that unless necessary.

Also this implementation does NOT stop the user from typing whatever they like in the TextBox portion of the ComboBox. If they type something stupid there the SelectedItem will revert to NULL, so be prepared to handle that in your code.

Also if you have many items I would highly recommend using the VirtualizingStackPanel like my example above as it makes quite a difference in loading time

SOLUTION 2 :

You can try https://www.nuget.org/packages/THEFilteredComboBox/ and give feedback. I plan to get as much feedback as possible and create perfect filtered combobox we all miss in WPF.

SOLUTION 3 :

Kelly's answer is great. However, there is a small bug that if you select an item in the list (highlighting the input text) then press BackSpace, the input text will revert to the selected item and the SelectedItem property of the ComboBox is still the item you selected previously.

Below is the code to fix the bug and add the ability to automatically select the item when the input text matches it.

using System.Collections;
using System.Diagnostics;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Input;

namespace MyControls
{
public class FilteredComboBox : ComboBox
{
private string oldFilter = string.Empty;

private string currentFilter = string.Empty;

protected TextBox EditableTextBox => GetTemplateChild("PART_EditableTextBox") as TextBox;


protected override void OnItemsSourceChanged(IEnumerable oldValue, IEnumerable newValue)
{
if (newValue != null)
{
var view = CollectionViewSource.GetDefaultView(newValue);
view.Filter += FilterItem;
}

if (oldValue != null)
{
var view = CollectionViewSource.GetDefaultView(oldValue);
if (view != null) view.Filter -= FilterItem;
}

base.OnItemsSourceChanged(oldValue, newValue);
}

protected override void OnPreviewKeyDown(KeyEventArgs e)
{
switch (e.Key)
{
case Key.Tab:
case Key.Enter:
IsDropDownOpen = false;
break;
case Key.Escape:
IsDropDownOpen = false;
SelectedIndex = -1;
Text = currentFilter;
break;
default:
if (e.Key == Key.Down) IsDropDownOpen = true;

base.OnPreviewKeyDown(e);
break;
}

// Cache text
oldFilter = Text;
}

protected override void OnKeyUp(KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
case Key.Down:
break;
case Key.Tab:
case Key.Enter:

ClearFilter();
break;
default:
if (Text != oldFilter)
{
var temp = Text;
RefreshFilter(); //RefreshFilter will change Text property
Text = temp;

if (SelectedIndex != -1 && Text != Items[SelectedIndex].ToString())
{
SelectedIndex = -1; //Clear selection. This line will also clear Text property
Text = temp;
}


IsDropDownOpen = true;

EditableTextBox.SelectionStart = int.MaxValue;
}

//automatically select the item when the input text matches it
for (int i = 0; i < Items.Count; i++)
{
if (Text == Items[i].ToString())
SelectedIndex = i;
}

base.OnKeyUp(e);
currentFilter = Text;
break;
}
}

protected override void OnPreviewLostKeyboardFocus(KeyboardFocusChangedEventArgs e)
{
ClearFilter();
var temp = SelectedIndex;
SelectedIndex = -1;
Text = string.Empty;
SelectedIndex = temp;
base.OnPreviewLostKeyboardFocus(e);
}

private void RefreshFilter()
{
if (ItemsSource == null) return;

var view = CollectionViewSource.GetDefaultView(ItemsSource);
view.Refresh();
}

private void ClearFilter()
{
currentFilter = string.Empty;
RefreshFilter();
}

private bool FilterItem(object value)
{
if (value == null) return false;
if (Text.Length == 0) return true;

return value.ToString().ToLower().Contains(Text.ToLower());
}
}
}

SOLUTION 4 :

This is my take on it. A different approach, one that I have made for myself and one that I am using. It works with IsTextSearchEnabled="true". I've just completed it so there could be some bugs.

    public class TextBoxBaseUserChangeTracker
{
private bool IsTextInput { get; set; }

public TextBoxBase TextBox { get; set; }
private List<Key> PressedKeys = new List<Key>();
public event EventHandler UserTextChanged;
private string LastText;

public TextBoxBaseUserChangeTracker(TextBoxBase textBox)
{
TextBox = textBox;
LastText = TextBox.ToString();

textBox.PreviewTextInput += (s, e) =>
{
IsTextInput = true;
};

textBox.TextChanged += (s, e) =>
{
var isUserChange = PressedKeys.Count > 0 || IsTextInput || LastText == TextBox.ToString();
IsTextInput = false;
LastText = TextBox.ToString();
if (isUserChange)
UserTextChanged?.Invoke(this, e);
};

textBox.PreviewKeyDown += (s, e) =>
{
switch (e.Key)
{
case Key.Back:
case Key.Space:
case Key.Delete:
if (!PressedKeys.Contains(e.Key))
PressedKeys.Add(e.Key);
break;
}
};

textBox.PreviewKeyUp += (s, e) =>
{
if (PressedKeys.Contains(e.Key))
PressedKeys.Remove(e.Key);
};

textBox.LostFocus += (s, e) =>
{
PressedKeys.Clear();
IsTextInput = false;
};
}
}

public static class ExtensionMethods
{
#region DependencyObject
public static T FindParent<T>(this DependencyObject child) where T : DependencyObject
{
//get parent item
DependencyObject parentObject = VisualTreeHelper.GetParent(child);

//we've reached the end of the tree
if (parentObject == null) return null;

//check if the parent matches the type we're looking for
T parent = parentObject as T;
if (parent != null)
return parent;
else
return parentObject.FindParent<T>();
}

Posting Komentar

0 Komentar