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

Question

I need to to Highlight the search result according to the text that is entered in the text box in windows phone 7,

enter image description here

the usual wpf code is not working in windows phone 7. . Somebody say how to achieve this in windows phone 7

Actually this is the xaml Listbox I'm using to populate the Contact list,

    <ListBox Name="ContactList" ItemsSource="{Binding}" Margin="14,85,14,28" Foreground="White" SizeChanged="ContactList_SizeChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border BorderThickness="2" HorizontalAlignment="Left" VerticalAlignment="Center" BorderBrush="{StaticResource PhoneAccentBrush}" >
                            <Image Source="{Binding Converter={StaticResource ContactPictureConverter}}" Width="48" Height="48" Stretch="Fill" Name="img1" />
                        </Border>
                        <TextBlock Name="ContactResults" Text="{Binding Path=DisplayName, Mode=OneWay}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="18,8,0,0" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <TextBox Name="contactFilterString" Margin="0,0,0,528" TextChanged="contactFilterString_TextChanged" />

C# Code,

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    //using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.UserData;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    using System.Collections.ObjectModel;
    using Microsoft.Phone.Shell;
    using System.Windows.Controls;
    using System.Windows.Media.Imaging;
    using System.Text.RegularExpressions;

    namespace SmartContactsApp
    {
public partial class MainPage : PhoneApplicationPage
{
    private List<Address> lstAddress = new List<Address>();
    public string addressJson = string.Empty;

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        CreateSecondaryTile();
    }

    /// <summary>
    /// To List all the Contacts. . .
    /// </summary>
    private void ContactListing()
    {
        ContactList.DataContext = null;
        Contacts cons = new Contacts();
        cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted);
        cons.SearchAsync(contactFilterString.Text, FilterKind.DisplayName, "Contacts");
    }

    /// <summary>
    /// To Fetch All Contacts from Mobile Contacts. . .
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    public void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e)
    {
        try
        {
            ContactList.DataContext = e.Results;

        }
        catch (Exception)
        {
            throw;
        }
    }

    private void contactFilterString_TextChanged(object sender, TextChangedEventArgs e)
    {
        ContactListing();
    }
    }

How to highlight in this,

Thanks in advance!

score 5 · Accepted Answer · edited May 23 '17 at 12:23

I Did it with the help from this

Xaml code:

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox Name="ContactList" Margin="14,85,14,28" Foreground="White">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding DisplayName}" Width="450" TextWrapping="Wrap" FontSize="24" Visibility="Collapsed"/>
                        <RichTextBox Width="450" FontSize="24" Foreground="#FFFFFF"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <TextBox Name="contactFilterString" Margin="0,0,0,528" TextChanged="contactFilterString_TextChanged" />
    </Grid>

c# Code:

            private void contactFilterString_TextChanged(object sender, TextChangedEventArgs e)
    {
       // ContactListing();
        SearchVisualTree(ContactList);
        if (contactFilterString.Text == "")
        {
            ContactListing();
        }
    }

    private void SearchVisualTree(Action ContactListing)
    {
        SearchVisualTree(ContactList);
    }

    private void SearchVisualTree(DependencyObject targetElement)
    {

        var count = VisualTreeHelper.GetChildrenCount(targetElement);

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(targetElement, i);
            if (child is TextBlock)
            {
                textBlock1 = (TextBlock)child;
                HighlightText();
                break;
            }
            else
            {
                //ContactListing();
                SearchVisualTree(child);
            }
        }
    }

    private void HighlightText()
    {
        if (textBlock1 != null)
        {
            string text = textBlock1.Text;
            textBlock1.Text = text;
            textBlock1.Inlines.Clear();

            int index = text.IndexOf(contactFilterString.Text);
            int lenth = contactFilterString.Text.Length;


            if (!(index < 0))
            {
                Run run = new Run() { Text = text.Substring(index, lenth), FontWeight = FontWeights.ExtraBold };
                run.Foreground = new SolidColorBrush(Colors.Orange);
                textBlock1.Inlines.Add(new Run() { Text = text.Substring(0, index), FontWeight = FontWeights.Normal });
                textBlock1.Inlines.Add(run);
                textBlock1.Inlines.Add(new Run() { Text = text.Substring(index + lenth), FontWeight = FontWeights.Normal });

                textBlock1.FontSize = 30;
                textBlock1.Foreground = new SolidColorBrush(Colors.Black);
            }
            else
            {
                //textBlock1.Text = "No Match";

            }
        }

    }

     /// <summary>
    /// To List all the Contacts. . .
    /// </summary>
    private void ContactListing()
    {
        ContactList.DataContext = null;
        Contacts cons = new Contacts();
        cons.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(Contacts_SearchCompleted);
        cons.SearchAsync(contactFilterString.Text, FilterKind.DisplayName, "Contacts");
    }

    /// <summary>
    /// To Fetch All Contacts from Mobile Contacts. . .
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    public void Contacts_SearchCompleted(object sender, ContactsSearchEventArgs e)
    {
        try
        {

            ContactList.DataContext = e.Results;

        }
        catch (Exception)
        {
            throw;
        }
    }

Thanks for the help!

score 1 · Answer 2 · edited Jan 18 '21 at 12:34

For a similar kind of requirement, I did the following:

First I took the following as part of my ListBox data template

<StackPanel Width="450">
    <TextBlock Text="{Binding text}" Width="450" TextWrapping="Wrap" FontSize="24" Visibility="Collapsed"/>
    <RichTextBox Width="450" FontSize="24" Foreground="#FFFFFF"/>
</StackPanel>

Then in the code behind: The list which I am using to bind to the ListBox is defined as follows

 public List<Result> results {
        get
        {  
            return _results;
        }
        set
        {
            string x = null;
            foreach (var item in value)
            {
                item.text2 = item.text;
                if (!item.text.StartsWith("<Section"))
                    if(!item.text.Contains("</Run>"))
                {
                    String xamlData = null;
                    var regx = new Regex(@query.Trim(), RegexOptions.IgnoreCase);
                    var matcches = regx.Matches(item.text);
                    x += matcches.Count;
                    if (matcches.Count > 0)
                    {
                        var match = @query.Trim();
                        xamlData = Regex.Replace(item.text, match, "<Run Foreground="Blue" FontWeight=\"ExtraBold\">" + match + "</Run>", RegexOptions.IgnoreCase);
                    }
                    if (xamlData == null)
                        xamlData = item.text;
                    item.text = "<Section xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"><Paragraph>" + xamlData + "</Paragraph></Section>";
                }
            }
            _results = value;
        }
    }

Then after getting the search results, add those to the above list and then setting it as the ItemsSource for the ListBox.

Now comes the critical part of the ListBox. Add a listbox_SizeChanged event handler as shown below

private void listboxMyTimeline_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        for (int i = 0; i < listboxMyTimeline.Items.Count; i++)
        {
            ListBoxItem lbi2 = (ListBoxItem)(listboxMyTimeline.ItemContainerGenerator.ContainerFromIndex(i));
            if (lbi2 != null)
            {
                var ob = FindFirstElementInVisualTree<RichTextBox>(lbi2);
                var ob2 = FindFirstElementInVisualTree<TextBlock>(lbi2);
                ob.Xaml = ob2.Text;
            }
            else
            {
                var itm = listboxMyTimeline.Items.ElementAt(i);
                lbi2 = (ListBoxItem)(listboxMyTimeline.ItemContainerGenerator.ContainerFromItem(itm));
                if (lbi2 != null)
                {
                    var ob = FindFirstElementInVisualTree<RichTextBox>(lbi2);
                    var ob2 = FindFirstElementInVisualTree<TextBlock>(lbi2);
                    ob.Xaml = ob2.Text;
                }
            }
        }
    }

Where the FindFirstElementVisualTree method is like this

private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
    {
        var count = VisualTreeHelper.GetChildrenCount(parentElement);
        if (count == 0)
            return null;

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(parentElement, i);

            if (child != null && child is T)
            {
                return (T)child;
            }
            else
            {
                var result = FindFirstElementInVisualTree<T>(child);
                if (result != null)
                    return result;

            }
        }
        return null;
    }

So, I am taking a hidden text box to which I am binding the actual text's constructed XAML code. This is because you cannot directly bind to the RichTextBox or Run elements. Then In the Size_changed handler, I am setting that XAMl code to the visible RichTextBox.

I am not sure to what extent it suits your needs, you may need to make many changes to the above process inorder to make it work for you.

Good luck :)

UPDATE:

Replace the Result class in my code with the Address class in your code.

And Replace your List definition with my List.

Add an additional property called 'xamlCode' in your Address class. (Replace the item.text2 = item.text line as item.xamlCode = item.DisplayName

And the rest should be clear for you.

Still if any doubts, Ask here.

Forgot to mention abt it. Its actually the word which you want to highlight — nkchandra, Dec 24 '12 at 05:57
I'm totally confused how to use ur code for my list box, would u please say me that. . . — Gopinath Perumal, Dec 24 '12 at 06:07
Show the code how you are setting the ItemsSource property for the list box and what class you are using in the List ? — nkchandra, Dec 24 '12 at 06:10
Sorry, But I Don't have enough credits to ask there. . That address class is not playing any role on the contact searching and populate listbox items. . I'm using the Microsoft.Phone.UserData; to fetch contacts from the phone. . . — Gopinath Perumal, Dec 24 '12 at 07:05
Then you define a new class which derives the Address class and add the extra properties to it. Otherwise, this may not help you. Try for another solution :( — nkchandra, Dec 24 '12 at 07:08

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

2 Answers2

Linked