Searching for items in a ListBox

A very popular means of searching through a list of items (such as e-mails) is to type some text into a TextBox and only show the items which contain that text. This blog post demonstrates one way to do that in WPF.

What the user is actually doing in this situation, whether or not (s)he realizes it, is applying a filter to the list of items.  If the user types “ar” into the Search TextBox, we must filter out all of the items which do not contain the text “ar”.  In other words, we must only filter in the items which contain that text.

WPF has built-in support for filtering items in a list.  ICollectionView has a Filter property, which can be set to an instance of Predicate<Object> — a delegate which takes a single Object argument and returns a bool.  Each item in the list is passed through that filter to determine if it is filtered in or out.

Without further ado, let’s first take a look at what the demo application associated with this post looks like:

Searching for items in a ListBox (Full List)

After the user types “ar” into the Search TextBox, the UI looks like this:

Searching for items in a ListBox (Filtered List)

As you can see above, typing into the Search TextBox removes all items which do not contain the search text.  Now let’s see how to implement this functionality.

First we will set up the list of items which the ListBox displays:

Searching for items in a ListBox (Array of String)

That’s just a plain old array of strings.  There’s nothing special here yet.  Next we’ll see the XAML which declares our simple UI:

Searching for items in a ListBox (Controls)

That basically just creates a TextBox and a ListBox.  The TextBox is not bound to anything, and the ListBox is bound to the array of strings seen previously.  There’s still not much of interest here yet.  However, now the plot thickens as we start exploring the code-behind.

Here is the Window’s constructor, which connects the Search TextBox with a class I wrote called TextSearchFilter:

Searching for items in a ListBox (Window Constructor)

That constructor grabs the array of strings declared in XAML and then asks for the default view which WPF wraps around it, for data binding purposes.  Once we have that view at our disposal, we simply pass it along to a new instance of TextSearchFilter so that it can perform its magic.

Here is the entire TextSearchFilter class:

Searching for items in a ListBox (TextSearchFilter)

That’s  the code which does real work.  TextSearchFilter applies a filter to the view (which wraps our array of strings, seen previously) and then hooks the Search TextBox’s TextChanged event.  When the TextChange event fires, it updates the text used to filter in/out items in the ListBox, and then tells the view to re-apply its filter.  Via the splendor known as “anonymous methods” we can write this entire class in its constructor, which makes it nice and compact.

Here is the source code for the demo project:  Searching for items in a ListBox (demo project) 

Be sure to change the file extension from .DOC to .ZIP and then decompress it.

About these ads

13 Responses to Searching for items in a ListBox

  1. Karl Shifflett says:

    Josh,

    Thank you for your great article(s) and for sharing them. Have a great day!

    Karl

  2. Josh Smith says:

    It’s my pleasure, Karl. Thanks for reading my thoughts! :)

    Josh

  3. amrita says:

    Thank you for giving this info.. good work! Can you tell me if I can put in profile views/ stats in my wordpress link.. thanks..

  4. Josh Smith says:

    Thanks amrita. I don’t know much about what WordPress is capable of. They have FAQs and a support e-mail address, so you should look there for more info about how to use the features of their site.

    Josh

  5. Great !
    Tahnk you Josh.
    Matthieu

  6. Divya says:

    Thanks … nice work..
    But i need that code in vb.net

  7. Prasad says:

    Great work I must say.
    Thanks for giving such a wondrful article.

    Prasad.

  8. Josh Smith says:

    Thanks Prasad. :)

  9. dan james says:

    Thanks for the example and a complete source code. Good work (and simple).

  10. Arun says:

    Dear Josh,

    Please help me to make this in VB.net 2003 i am unable to make it.
    Please help me & let me know how to code this same thing in vb.net 2003

    Thanks.
    Arun

  11. Josh Smith says:

    Arun,

    You’re joking, right?

    1) I don’t know VB.NET, all of my examples are in C#
    2) VB.NET 2003 cannot be used with WPF. Since I know you’re not talking about a WPF implementation, I don’t know what platform you have in mind.
    3) I’m busy, and you’re not offering money.

    LOL!

    Josh

  12. Maarten van Sprang says:

    Hi Josh,

    Thanks for the great tutorial!
    However, I was wondering how this function would look if you got the listbox items out of an external xml file. What would I have to change in both the Window1.cs and the TextSearchFilter.cs? I hope you can help me on this.

    Thanks,

    Maarten

  13. Chetan says:

    hi, thanks for code! it was great help. I made some basic changes to aquire name as i was binding object with list view

    thanks again

    Chetan

Follow

Get every new post delivered to your Inbox.

Join 275 other followers

%d bloggers like this: