Search of user's contacts: highlight part of the name that matches with the search, when using Data Binding and LongListSelector (WP8)

Question

I'm binding the user's contact list to a LongListSelector, as I saw in a Sample, this way:

<phone:PhoneApplicationPage.Resources>
...
    <DataTemplate x:Key="AddrBookItemTemplate" >
        <ListBoxItem>
            <StackPanel>                    
                <TextBlock Text="{Binding Path=DisplayName, Mode=OneWay}" FontFamily="Segoe WP" FontSize="25" />
                <TextBlock Text="{Binding Path=PhoneNumbers[0].PhoneNumber, Mode=OneWay}" FontFamily="Segoe WP Light" FontSize="20" />
            </StackPanel>
        </ListBoxItem>
    </DataTemplate>
...
</phone:PhoneApplicationPage.Resources>

...

<Grid x:Name="ContentPanel">
    <phone:LongListSelector
        x:Name="AddrBook"
        JumpListStyle="{StaticResource AddrBookJumpListStyle}"
        GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
        ItemTemplate="{StaticResource AddrBookItemTemplate}"
        LayoutMode="List"
        IsGroupingEnabled="true"
        HideEmptyGroups ="true"
        SelectionChanged="AddrBook_SelectionChanged"/>
</Grid>

And I'm doing the user's search for a specific name this way (using LINQ):

contactsList = contactsEnum.Where(m => m.PhoneNumbers.Count() > 0 && (m.DisplayName.Split(' ').ToList().Any(p => p.ToLower().StartsWith(tbxSearch.Text.ToLower())) || (m.PhoneNumbers.Any(y => y.PhoneNumber.StartsWith(tbxSearch.Text))))).ToList();
AddrBook.ItemsSource = contactsList; // With IsGroupingEnabled=false

I'm looking for a way to highlight the part of the name that matches with the search, but I can't do this, with the way I made the data binding...

Does anyone know how I could do the highlight?

score 0 · Answer 1 · edited May 23 '17 at 10:25

You could do something like this, whenever the word you type in within the textbox matches with the word which could be within the sub strings or the Collection, you could simply highlight it!

string[] substrings = regex.Split(Content.Text);
Content.Inlines.Clear();

foreach (var item in substrings)
{
    //if a word from the content matches the search-term
    if (regex.Match(item).Success)
    {
        //create a 'Run' and add it to the TextBlock
        Run run = new Run(item);
        run.Foreground = Brushes.Red;
        Content.Inlines.Add(run);
    }
    else //if no match, just add the text again
        Content.Inlines.Add(item);
}

References: Is there a way I can highlight specific text in a textbox?

How to Highlight the result from context sensitive search in windows phone 7?

Search of user's contacts: highlight part of the name that matches with the search, when using Data Binding and LongListSelector (WP8)

1 Answers1