Follow @PDSAInc Filtering CollectionView Data in Silverlight 4 - Paul Sheriff's Blog for the Real World

Paul Sheriff's Blog for the Real World

This blog is to share my tips and tricks garnered over 25+ years in the IT industry

Paul's Favorites

Filtering CollectionView Data in Silverlight 4

If you are using Silverlight's ListBox control, you can filter the data in a CollectionViewSource object using just a little bit of simple code. For this example, I will be using a simple Product class with two properties, and a list of Product objects using the Generic List class. Try this out by creating a Product class as shown in the following code:

public class Product {
  public Product(int id, string name) {
    ProductId = id;
    ProductName = name;
  }

  public int ProductId { get; set; }
  public string ProductName { get; set; }
}

Create a collection class that initializes a property called DataCollection with some sample data as shown in the code below:

public class Products : List<Product>
{
  public Products()
  {
    InitCollection();
  }

  public List<Product> DataCollection { get; set; }

  List<Product> InitCollection()
  {
    DataCollection = new List<Product>();

  DataCollection.Add(new Product(1, "PDSA Framework"));
  DataCollection.Add(new Product(2, "Haystack"));
  DataCollection.Add(new Product(3, "Fundamentals of .NET eBook"));
  DataCollection.Add(new Product(4, "WPF Fundamentals Video"));
  DataCollection.Add(new Product(5, "Fundamentals of ASP.NET Security eBook"));
  DataCollection.Add(new Product(6, "Fundamentals of SQL Server eBook"));
  DataCollection.Add(new Product(7, "Microsoft VS.NET 2010"));
  DataCollection.Add(new Product(8, "Microsoft Silverlight 4"));

    return DataCollection;
  }
}

The screen shot shown in Figure 1 is a Silverlight page that allows the user to filter the Product data by typing in a value into the text box, then clicking on the Search button.

Filtering Data (Fig. 1)

Figure 1: Filter Collection Data in Silverlight

If the user fills in a partial product name, such as the letter 'F' and then clicks on the Search button, the results are as shown in Figure 2.

 Figure 2

Figure 2: The data filtered in Silverlight

You next need to add an XML namespace to your MainPage.xaml so you can reference the Products class.

xmlns:local="clr-namespace:SLFilterData"

The 'local' namespace is the name of the project that you created (in my case 'SLFilterData'). Create a UserControl.Resources section in your Silverlight page that looks like the following:

<UserControl.Resources>
  <local:Products x:Key="products" />
  <CollectionViewSource x:Key="prodCollection"
                        Source="{Binding Source={StaticResource products},
                             Path=DataCollection}">
  </CollectionViewSource>
</UserControl.Resources>

The first line of code in the resources section creates an instance of your Products class. The constructor of the Products class calls the InitCollection method which creates the various Product objects and adds them to the DataCollection property of the Products class. Once the Products object is instantiated you now add a CollectionViewSource object in XAML using the Products object as the source of the data to this collection. A CollectionViewSource allows us to perform sorting, grouping and filtering on our collection of Product objects.

Next, you create the search area using a StackPanel, TextBlock, TextBox and a Button control:

<StackPanel Orientation="Horizontal"
            Margin="10"
            Grid.Row="0">
  <TextBlock Text="Enter Partial Name: " />
  <TextBox Width="100"
            Name="txtName" />
  <Button Name="btnSearch"
          Content="Search"
          Click="btnSearch_Click" />
</StackPanel>

Now add a list box to your XAML page and set the DisplayMemberProperty to be "ProductName" which is the property on the Product class that you wish to display in the list box.

<ListBox Margin="10"
          Grid.Row="1"
          Name="lstData"
          DisplayMemberPath="ProductName"
          ItemsSource="{Binding Source={StaticResource collProducts}}" />

Now you can write the code behind for the click event of the Seach button. In the Click event call a method name FilterData that will perform the filtering using CollectionViewSource.

private void FilterData()
{
  if (lstData != null)
  {
    ICollectionView dataView = default(ICollectionView);

    dataView = (ICollectionView)lstData.ItemsSource;

    dataView.Filter = prod => ((Product)prod).ProductName.ToLower()
                                 .StartsWith(txtName.Text.ToLower());

    lstData.ItemsSource = dataView;
  }
}

In the FilterData method you create an ICollectView object from the existing ItemsSource property of the list box. When you use a CollectionViewSource object in your XAML, the data is put in the collection as an object that implements the ICollectionView interface. You can then set the Filter property of the collection view to a predicate that will determine the filter on the data. After this is set, you give this new ICollectionView object to the ItemsSource property of the list box and the filter is applied. The new data is then displayed in the list box.

Summary
That's all there is to it. A simple way to allow your users to filter data from a collection with just a few lines of code!

NOTE: You can download the complete sample C# and XAML code at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "Filtering CollectionView Data in Silverlight 4" from the drop-down.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".

 

Posted: Aug 03 2010, 12:24 PM by psheriff | with 8 comment(s)
Filed under: ,

Comments

corben said:

Thanks for this work.

Just a problem : impossible to instantiate class products in XAML.

I thought we can't instantiate in XAML with a constructor which is not the default constructor (here we call initcollection)

Can you help me ?

(sorry for my english)

# December 21, 2010 10:16 AM

psheriff said:

Corben,

You will notice that my Products collection, which is the one that I am instantiating in the XAML has a default constructor. This constructor then calls the InitCollection.

# December 21, 2010 10:39 AM

corben said:

Thanks a lot for your answer.

It works now, it was just an error of translation between C# and VB.

# December 24, 2010 4:45 AM

Christine said:

Thanks you so much for the example.  It has helped me a ton with a project I am working on.

Since you helped me to understand this a bit, I was also able to create a filter on "KeyUp" which allowed me to get rid of the search box.

xaml:

<TextBox x:Name="txtName" TextWrapping="Wrap" Margin="209.46,47,191,0" VerticalAlignment="Top" KeyUp="KeyUpFilter"/>

code:

private void FilterList()

{

if (listData != null)

{

ICollectionView dataView = default(ICollectionView);

dataView = (ICollectionView)listData.ItemsSource;

dataView.Filter = prod => ((Product)prod).ProductName.ToLower().StartsWith(txtName.Text.ToLower());

listData.ItemsSource = dataView;

}

}

private void KeyUpFilter(object sender, System.Windows.Input.KeyEventArgs e)

{

FilterList();

}

It works perfectly!  You're a star!

# June 4, 2011 11:32 AM

iris said:

Brilliant code!

Thank you so much. I've been looking for hours after a solution for my problem - and finally I have found it here.

Instead of the Search-Button I use a TextChanged-Event for my TextBox - so all results are displayed immediately.

# September 5, 2011 12:54 PM

ricardo said:

You solve all my filtering and grouping problems which I spent most of my day looking for a solution, PagedCollectionView is the way to go...

My filter is based on categories selected from a dropdown, all the same the .Filter = Query is what I needed...

Thanks a million!!!

# January 27, 2012 11:58 PM

Mathew said:

Will this work in WP7?? I want a similar approach using the autocomplete box to filter my list box dynamically as the user types.

Please help. Spent a week on this stuff!!

# August 6, 2012 10:56 AM

psheriff said:

Mathew,

The CollectionViewSource object is available in WP7, so, it should work with little or no changes. I have not tried it however. Contact me on my email if you would like consulting help. PSheriff at pdsa.com.

Paul

# August 6, 2012 11:24 AM