How should I build a filtering search for a WP7 app?

Question

I'm developing an app which has a number of items in a ListBox.

I want to create a search using a TextBox so that when the user types in the TextBox the ListBox filters the results.

Answer 1

use CollectionViewSource its very useful for filtering and searching:

Reffer: http://www.geoffhudik.com/tech/2010/10/14/wp7-in-app-searching-filtering.html

Answer 2

I once wrote a similar functionality for a WPF application. The searched text should be highlighted for items of a DataGrid. All you need is a MultiValueConverter, which converts the text of your items and the search text into a new TextBlock, which contains Run elements with the highlighted parts.

Converter

The converter will convert the text and the search text to a TextBlock instance, which contains Run elements for the matches with a defined style.

public class TextToHighlightedTextConverter : IMultiValueConverter
{
    public Style HighlightedTextStyle { get; set; }

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length > 0)
        {
            if (values.Length > 1)
            {
                var text = values[0] as string;
                var searchText = values[1] as string;
                if (!string.IsNullOrEmpty(text) && !string.IsNullOrEmpty(searchText))
                {
                    var textParts = GetSplittedText(text, searchText);
                    var textBlock = new TextBlock();
                    foreach (string textPart in textParts)
                    {
                        textBlock.Inlines.Add(textPart.Equals(searchText, StringComparison.OrdinalIgnoreCase)
                                                    ? new Run(textPart) {Style = HighlightedTextStyle ?? new Style()}
                                                    : new Run(textPart));
                    }
                    return textBlock;
                }
            }
            return values[0];
        }
        return null;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    private IEnumerable<string> GetSplittedText(string text, string searchText)
    {
        IList<string> textParts = new List<string>();
        if (string.IsNullOrEmpty(searchText))
        {
            if (text.Length > 0)
            {
                textParts.Add(text);
            }
        }
        else
        {
            while (text.Length > 0)
            {
                int searchIndex = text.IndexOf(searchText, StringComparison.OrdinalIgnoreCase);
                if (searchIndex > -1)
                {
                    if (searchIndex > 0)
                    {
                        string textInFrontOfMatch = text.Substring(0, searchIndex);
                        textParts.Add(textInFrontOfMatch);
                    }
                    textParts.Add(text.Substring(searchIndex, searchText.Length));
                    text = text.Remove(0, searchIndex + searchText.Length);
                }
                else
                {
                    textParts.Add(text);
                    text = string.Empty;
                }
            }
        }
        return textParts;
    }
}

Converter definition in you xaml file

In the xaml file you define your converter and set the style that should be used for matches.

<Converters:TextToHighlightedTextConverter x:Key="TextToHighlightedTextConverter">
    <Converters:TextToHighlightedTextConverter.HighlightedTextStyle>
        <Style TargetType="{x:Type Run}">
            <Setter Property="Background" Value="Orange" />
        </Style>
    </Converters:TextToHighlightedTextConverter.HighlightedTextStyle>
</Converters:TextToHighlightedTextConverter>

Converter usage for your ListBox

You define a DataTemplate for the items of your ListBox. This DataTemplate uses a ContentPresenter whose content will be set by the defined converter.

<ListBox ItemsSource={Binding YourItemsSource}>
    <ListBox.ItemsTemplate>
        <DataTemplate>
            <ContentPresenter>
                <ContentPresenter.Content>
                    <MultiBinding Converter="{StaticResource TextToHighlightedTextConverter}">
                        <MultiBinding.Bindings>
                            <Binding />
                            <Binding Path="YourSearchTextSource" />
                        </MultiBinding.Bindings>
                    </MultiBinding>
                </ContentPresenter.Content>
            </ContentPresenter>
        </DataTemplate>
    </ListBox.ItemsTemplate>
</ListBox>