WPF: Dynamic Filtering Data – the simple approach

Sunday 25th November, 2007 at 7:58 pm 2 comments

You often find yourself wanting to quickly filter data based on a criteria defined by a user in an application.  A classic example is filtering what’s shown in a listbox by what a user has typed into a textbox.

There are many approaches to solving the problem but a quick and simple approach is: (first the xaml):

<Window x:Class="Window1"  
  Title="Window1" Height="598" Width="1015">
     <local:contacts x:Key="myContacts" />    
     <CollectionViewSource x:Key="contactsViewSource"
         Source="{StaticResource myContacts}" Filter="CollectionViewSource_Filter" />

  <Grid Name="Grid1">
      <RowDefinition Height="60*" />
      <RowDefinition Height="423*" />
    <TextBox Margin="62,26,16,0" Name="txtSearch" Height="23" VerticalAlignment="Top"
     AcceptsReturn="True" FontStyle="Italic" KeyUp="txtSearch_KeyUp" />
    <Label Margin="12,12,66,0" Name="Label1" Height="28" VerticalAlignment="Top">Search</Label>

    <ListBox Grid.Row="1" Name="lstContacts" IsSynchronizedWithCurrentItem="True" 
      ItemsSource="{Binding Source={StaticResource contactsViewSource}}" />


The local resource contacts is a class that is defined in the application.  The namespace is imported into the XAML with xmlns:local=”clr-namespace:contactManager“‘.  The class itself is referenced in XAML by <local:contacts x:Key=”myContacts” />‘.

The class itself inherits from an observableCollection – although the approach would work with any datasource that can be bound to the listbox. After contacts has been imported – we setup a collectionViewSource – rather than using the default viewSource provided by WPF.

The code behind to connect the filter text with the filter applied to the listbox is:

Partial Public Class Window1  
  Private Function findString(ByVal haystack As String, ByVal needle As String, _       
                                 Optional ByVal comparison As StringComparison _          
                                    = StringComparison.CurrentCultureIgnoreCase) As Integer
    ' We are using string.indexOf rather than string.contains as string.contains     
    ' doesn't allow us to specify CurrentCultureIgnoreCase         
    Return haystack.IndexOf(needle, 0, comparison) 

  End Function 

Private Sub CollectionViewSource_Filter(ByVal sender As System.Object, _                                   
                                    ByVal e As System.Windows.Data.FilterEventArgs) 
   ' Cast the listbox item to the type used   
  Dim thisContact As contact = CType(e.Item, contact) 

  If (thisContact IsNot Nothing) Then  ' Handle an empty item 

    If String.IsNullOrEmpty(txtSearch.Text) Then           
      ' Make sure we have some text that we wish to filter

      e.Accepted = True         
      ' If we don't then we want all items to appear in the listbox

      ' findString returns the index of the needle (search text) in       
      ' the haystack (text to be searched)             
      ' IndexOf returns -1 if the needle isn't found in the haystack 

      If (findString(thisContact.firstName, txtSearch.Text) > -1) _                 
               Or (findString(thisContact.lastName, txtSearch.Text) > -1) Then 

        ' The needle exists in the haystack - so accept this entry                 
        e.Accepted = True 

        ' This item doesn't contain the needle we are looking for

        e.Accepted = False

      End If 

    End If

    ' thisContact IS nothing - so don't bother displaying it 

    e.Accepted = False 

  End If 

End Sub 

Private Sub txtSearch_KeyUp(ByVal sender As System.Object, _                    
                                ByVal e As System.Windows.Input.KeyEventArgs)          
' This event will be raised whenever the keyUp event occurs on the     
' textbox that we are using to filter         
' Do a simple refresh on the listbox 

    CType(Me.FindResource("contactsViewSource"), CollectionViewSource).View.Refresh() 

  End Sub 

End Class 

  And that's it - a listbox containing items is filtered based on the text typed by the user in a search box.

Technorati Tags: ,,


Entry filed under: .NET, Development, Visual Studio, WPF. Tags: , , .

DataBinding ObservableCollection with WPF Handy tip on getting Google Webmaster tools to verify your site

2 Comments Add your own

  • 1. Mick  |  Monday 31st December, 2007 at 11:16 pm

    Thank you for posting this elegant solution – much appreciated

  • 2. Lokesh Lal  |  Thursday 11th August, 2016 at 11:10 am

    for someone like me searching for dynamic filtering solution. following is a sample i created for dynamic filtering


    creates filter for each property of entity, based on the attribute defined on the entity.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

Recent Posts

%d bloggers like this: