silverlight - 在 Silverlight 中实现 "Search as you type"

Question

我正在尝试在我的 Silverlight 应用程序中实现键入时搜索屏幕。我的想法是，我有一个带有文本编辑控件和列表框的屏幕。列表框充满了我的所有数据。

当用户在文本框中键入内容时，会发生以下情况:

• 所有不包含用户输入的所有字母的项目都将被隐藏。
• 可见列表项的匹配字母以不同的颜色突出显示。

我不知道如何开始，所以欢迎所有的指针、示例和提示!

Answer 1

我建议使用 CollectionViewSource。 CollectionViewSource 具有过滤项目的能力。您可以将 ListBox 绑定(bind)到 CollectionViewSource 并处理 Filter 事件来进行过滤。将“搜索框”绑定(bind)到可以在过滤器事件中使用的文本属性。您可以通过调用 CollectionViewSource View 上的 Refresh 方法来处理 TextBox 控件的“KeyUp”事件来启动过滤。

使用 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

须藤代码:

// 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();
  }
}