Tech Talk A software developer on all things tech, and then some

1Jun/126

Filter an ObservableCollection with a CollectionView in C#

Using an ObservableCollection and need to filter its contents? A quick and easy way I found was to create and bind to a CollectionView to perform the filtering for you.

Step 1 : Create the Observable Collection

The first step is to create the observable collection. This will work for objects or system type lists, so feel free to use what you like.

private ObservableCollection<Car> _CarList;
public ObservableCollection<Car> CarList
{
	get
	{
		if (_CarList == null)
		{
			//Code to build the list
		}
		return _CarList;
	}
}

Step 2 : Create the Filter

The next step is to create the filter. Simple enough, create a method that returns a boolean and takes an object as a parameter, a predicate. Perform what checks are needed within the filter and return whether it should be shown or not. Here in this example I'm checking to see if another property, FilterText (Just a property that contains the text you want to filter with), and seeing if the name of the model of the car matches.

private bool CarFilter(object item)
{
	Car car = item as Car;

	if(car.Name.Contains(FilterText))
	{
		return true;
	}
	else
	{
		return false;
	}
}

Step 3 : Bind and Create the CollectionView

The final step is to set up the adding and binding to the CollectionView, then adding the filter. Let's first create the CollectionView :

private ICollectionView _CarListView { get; set; }

Next lets set up the binding. Add this at the bottom of the null check in your ObservableCollection set. This will hook up your collection to your view, then add the filter afterwards.

//For the car filtering
this._CarListView = CollectionViewSource.GetDefaultView(_CarList);
this._CarListView.Filter = CarFilter;

Now let's see what it looks like all together :

private ICollectionView _CarListView { get; set; }
private ObservableCollection<Car> _CarList;
public ObservableCollection CarList
{
	get
	{
		if (_CarList == null)
		{
			//Code to build the list

			//For the car filtering
			this._CarListView = CollectionViewSource.GetDefaultView(_CarList);
			this._CarListView.Filter = CarFilter;
		}
		return _CarList;
	}
}

private bool CarFilter(object item)
{
	Car car = item as Car;

	if(car.Name.Contains(FilterText))
	{
		return true;
	}
	else
	{
		return false;
	}
}

Well, I hope this helps trying to add filtering to an observable collection. Good luck and happy coding!

20Feb/103

WPF Filtering a Combobox

Setting Up the ComboBox

So in WPF, I wanted to filter a combobox to treat it as an autocompletebox.

Note : This tutorial expects you understand how to populate the combobox to have the data to filter.

I started off enabling two items on the properties tab of the combobox.

isEditable

Allows the user to be able to type in the combobox.

isTextSearchEnabled

Tells the combobox to suggest text and finishes your text with the closest word possible.
*Update (1/31/2013)- It looks like since posting this, you might be better off disabling this to filter the items properly.

Creating the Filter

That was the easy part. Now we have to create and code the filter. The first part is creating a predicate.

private bool FilterPredicate(object obj)
{
    string text = obj as string;
    if (text != null)
    {
         if (text.contains(combobox.Text))
        {
               return true;
        }
        return false
    }
    else
    {
          //if the string is null, return false
          return false;
    }

}

Next we assign the predicate to the combobox filter event. This will tell what filter to run on the combobox.

combobox.Items.Filter += this.FilterPredicate;

Finally we need to set up some of the functionality of the combobox. We can do this in an OnClick event.

private void combobox_KeyDown(object sender, KeyEventArgs e)
{
	if ((e.Key == Key.Enter) || (e.Key == Key.Tab) || (e.Key == Key.Return))
	{
		//Formatting options
		combobox.Items.Filter = null;
	}
	else if ((e.Key == Key.Down) || (e.Key == Key.Up))
	{
		combobox.IsDropDownOpen = true;
	}
	else
	{
		combobox.IsDropDownOpen = true;
		combobox.Items.Filter += this.FilterPredicate;
	}
}

There you have it, an autocompletebox. A few things to note. There may be better ways to do this (esp with the key down events, this was done as a uber quick example), but I wanted to give the beginning user an introduction on how to program this. If you have any questions please post a comment.

   
%d bloggers like this: