Implementing a "Search as you type" in Silverlight

I am trying to implement a search as you type screen in my Silverlight application. The idea is that I have a screen with a textedit control and a listbox. The listbox is fill开发者_如何学Ced with all my data.

When the user types something in the textbox the following happens:

• All the items that are not containing all the letters from the user input are hidden.
• The matching letters of the visible list items are highlighted with a different color.

I am not sure how to start with this, so all pointers, samples and hints are welcome!

---

I would suggest using a CollectionViewSource. A CollectionViewSource has the ability to filter items. You can bind your ListBox to the CollectionViewSource and handle Filter event to do the filtering. Bind your "Search Box" to a Text property which you can use in your Filter event. You can handle the "KeyUp" event of the TextBox control to kick off your filtering, by calling the Refresh method on the CollectionViewSource View.

Filtering Data using CollectionViewSource: http://xamlcoder.com/blog/2010/10/27/filtering-data-using-collectionviewsource/

http://msdn.microsoft.com/en-us/library/system.windows.data.collectionviewsource.filter.aspx

http://msdn.microsoft.com/en-us/library/system.componentmodel.icollectionview.aspx

http://timheuer.com/blog/archive/2009/11/04/updated-silverlight-3-datagrid-grouping-data-pagedcollectionview.aspx

http://bea.stollnitz.com/blog/?p=392

Sudo code:

// ViewModel - properties should fire NotifyPropertyChanged
public class ViewModel : INotifyPropertyChanged
{
  public ViewModel
  {
    this.Data = new CollectionViewSource();
    this.Data.Source = this.GenerateObjects();
    this.Data.Filter += (s,e) =>
    {
      // TODO: add filter logic
      DataObject item = e.Item as DataObject;
      return item.Name.Contains(this.SearchText);
    };
  }
  public string SearchText{get;set;}
  public CollectionViewSource Data {get;set;}

  private List<DataObject> GenerateObjects(){ // generate list of data objects }
}

// View XAML
<StackPanel>
  <TextBox Text="{Binding SearchText, Mode=TwoWay}" KeyUp="OnKeyUp"/>

  <ListBox ItemsSource="{Binding Data.View}"/>
</StackPanel>


// View Code Behind
public class View : UserControl
{
  public View() { this.DataContext = new ViewModel(); }

  private ViewModel ViewModel { get { return this.DataContext as ViewModel; } }

  private OnKeyUp()
  {
    this.ViewModel.Data.View.Refresh();
  }
}

---

You may want to start with the AutocompleteBox from the Silverlight Toolkit.

It has a number of handy points where you would be able to extend it's functionality, for example in the instance searching your pool of values.