DCSIMG
WPF ItemsControl Filter Control - Essential WPF

WPF ItemsControl Filter Control

If you are working with an ItemsControl (ListBox, ComboBox, ListView), and you want to filter several items using Outlook 2007 search style, this control is exactly for you.

 

image image image

 

Usage:

    <local:Filter Header="Jewish Names"
                                Background="{DynamicResource DefaultHeaderBackgroundBrush}">
        <ListBox ItemsSource="{Binding}"
                         Background="{DynamicResource DefaultBackgroundBrush}"
                         Foreground="{DynamicResource DefaultForegroundBrush}" />
    </local:Filter>

 

The Filter custom control is a HeaderedContentControl which its content is limited to have an ItemsControl of any kind.

Once a well bind, ItemsControl content is placed, the filter uses the default-view of the content to filter its items, based on a default, customizable search predicate. To change the default search predicate, you can set the Filter.SearchStrategy property to any delegate matches to the SearchPredicate signature. Also you can set the search pattern, by setting the Filter.SearchPattern property explicitly.

 

How to use custom filter:

Having a collection of Person entity bind to the ItemsControl, you should set the Filter.SearchPredicate with an appropriate delegate (see Person.FirstNameSearchStrategy bellow) in order to filter by its FirstName or any other criteria.

 

public class Person
{
    public string FirstName { get; set; }

    public override string ToString()
    {
        return FirstName;
    }

    public static readonly Func<object, string, bool> FirstNameSearchStrategy = (element, pattern) =>
    {
        Person person = element as Person;
        if (string.IsNullOrEmpty(pattern)    ||
            person != null                    &&                
            person.FirstName.StartsWith(pattern, true, null))
        {
            return true;
        }
        return false;
    };
}
 
<local:Filter Header="Jewish Names"
              Background="{DynamicResource DefaultHeaderBackgroundBrush}"

              SearchStrategy="{x:Static local:Person.FirstNameSearchStrategy}">

    <ListBox ItemsSource="{Binding}"
             Background="{DynamicResource DefaultBackgroundBrush}"
             Foreground="{DynamicResource DefaultForegroundBrush}" />

</local:Filter>

How to customize the filter theme:

Colors: Since the Filter control is a custom control, the dark theme in the screen shots above is not part of the control itself.

Style & Template: You can replace only the filter text box style, by creating your own text box style, and set the Filter.FilterBoxStyle property with your style. Or you can replace the whole control template. Make sure that the new template visual tree has a TextBox element inside, named PART_FilterBox, It's part of the control signature.

 

Licensing:

If you liked it, tell your friends by placing a nice comment, if you didn't, send a private message directly to me smile_wink

 

You can download the code from here.

Published Monday, July 21, 2008 1:05 PM by Tomer Shamam

Comments

# re: WPF ItemsControl Filter Control

Monday, July 21, 2008 2:44 PM by Bastien C.

Hi Tom!

Very interesting project! I really like it ;-).

But a very small example with a custom class for datas would be pretty cool!

I tried to set the Datacontext to a list of Person (List<Person> persons = new List<Person>;), but I can't make the filter work with this structure...

my person class is very simple:

public class Person

{

  public string FirstName

  {

    get;

    set;

  }

}

Thx for help ;-).

++

# re: WPF ItemsControl Filter Control

Tuesday, July 22, 2008 10:18 AM by Tomer Shamam

Hi Bastien,

I have updated the post with a custom filter code snippet.

Cheers

# re: WPF ItemsControl Filter Control

Monday, July 28, 2008 7:18 AM by Bastien C.

Thxxx ;-)

# re: WPF ItemsControl Filter Control

Thursday, July 31, 2008 7:51 AM by erhan

hi.ı want to learn image processing.how can ı get image pixel and ı want to set color this pixel.

# re: WPF ItemsControl Filter Control

Thursday, July 31, 2008 8:07 AM by Tomer Shamam

Hi erhan,

You can start by reading this blog :-)

Click the Imaging tag on the top, left.

# re: WPF ItemsControl Filter Control

Thursday, July 31, 2008 8:11 AM by Tomer Shamam

Also it is worth mentioning that .NET 3.5 SP1 provides an easy option to write WPF Pixel Shader effects. You can learn about it here: blogs.msdn.com/.../introduction-to-writing-effects.aspx

# re: WPF ItemsControl Filter Control

Monday, September 29, 2008 1:52 PM by Jim Tomasko

I found your filter to not only work well, but more importantly be a great example to learn from.

In an attempt to "teach a man to fish", may I ask you where you found that you could use the [TemplatePart] attribute (or what process you used to figure out this would work?)

So far in very case where I've used these types of attributes (such as browsable) I have had to see them in sample code from someone else before I knew they existed.  I feel that learning how to find this information would be vauluable.

# re: WPF ItemsControl Filter Control

Tuesday, September 30, 2008 1:50 AM by Tomer Shamam

Hi Jim,

Thanks!

Reflector is a great utility, it lets you dig inside the CLR to find gems like the TemplatePartAttribute attribute and others. For example, open the WPF ComboBox class and you'll see that it uses this attribute to get the editable text box from the template. From here you should look inside the MSDN or search in the wild.

Cheers

# re: WPF ItemsControl Filter Control

Thursday, February 25, 2010 2:05 PM by Alex

Hello from cold-cold Russia!

thank you for your work and source codes. They r very usefull!

Alex

ICQ: one nine one eight six six six

Will be glad to speak with you and say @thanks@ personally!

# re: WPF ItemsControl Filter Control

Thursday, February 25, 2010 2:51 PM by Tomer Shamam

You welcome Alex, enjoy.

# re: WPF ItemsControl Filter Control

Friday, February 04, 2011 9:03 AM by Pankaj Upadhyay

Not able to display this control in my project.....Nothing shows in my window after using this code....I have pasted everything the same way

# re: WPF ItemsControl Filter Control

Monday, February 07, 2011 9:37 AM by Tomer Shamam

Pankaj, download my code, I believe you've missed something.

# re: WPF ItemsControl Filter Control

Sunday, August 07, 2011 10:13 AM by Itai Sargani

Hi, I’m having some performance issues regarding an observable collection attached to an ItemsControl and I was hoping you would give some advice.

I have an ItemsControl where the Panel is a panel I wrote (with an extremely complicated logic of the UIElements placement).

Basically, the UI shows some kind of electrical circuit design where the user can move elements and connect lines between them.

Each Item (model) can contain other items as children, as for simplicity, if an item is connected (it is the parent of them) to several items, or several items are connected to a single item (it is the child of them) then instead of having NxM connections (N parents contains references to M children), I have an element called Junction.

So by this way, N marents contains reference to 1 junction and this junction contains reference to M children.

(N + M + 1 connections instead of NxM).

When a junction is connected to another junction, I join them together.

So far so good, but the structure I have gives so far is similar to a tree, and Hierarchical Data Template was not good since the drawing/UI placement is not in a Hierarchical form (More like an electrical circuit drawing).

so, each time I’m changing the circuit, I’m clearing and re-filling a list which represent all the items (I flatten the “tree” to a simple list using recursion).

It works, but the problem is that it also causes the UI to refresh, so on large number of elements, it takes the UI a noticeable time to refresh and redraw… even if all I did was adding 1 item.

I tried on thinking on several solutions… I need a way to control the creation of the item container (and have some kind of Cache in the Panel, for example a Dictionary of item and UIElement).

I thought VirtualizingPanel would be the solution, but the Generator is giving me a head ache since it disconnects the items when I clear the list.

I tried creating the ContentPresenter myself and giving it DataContext, but the measure fails (size 0), and after the arrange (even if I give the children size) I don’t see anything on the UI.

I might be able do it in code-behind, but I don’t want to.

I was wondering if IEditableCollectionView may help me, and if so how?

If not, what would you suggest?

Thanks

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above:
Powered by Community Server (Commercial Edition), by Telligent Systems