Highlight the text of listboxitems inside a listbox depending on the textbox :

Question

I have a listbox and I display incremental search result in it based on the text changed event of a textbox, everytime I update the listboxitemsource. The items displayed inside a listbox the text of it must be highlighted.

Suppose the person enter in textbox sy and the listbox displays the result all getting started with sy :
Somewhat like this...,
System
SystemDefault
SystemFolder

so for the all above 3 results Sy must be highlighted.

How to achieve this? tx in advance

Answer 1

Maybe use a RichTextBox instead of a ListView? Then you can bold each string match.

Answer 2

First: A TextBlock can be composed of a series of Inline items that each can have different font characteristics. Try looking at the results of this:-

<TextBlock><Run FontWeight="Bold">Sy</Run><Run>stem</Run></TextBlock>

Second: You can bind a ListBox to an ObservableCollection<TextBlock> as long as you only bind it once.

Third: You can manipulate the contents of the set of Inlines of a textblock in code.

Putting it all together:-

Xaml:-

<UserControl x:Class="StackoverflowSpikes.ItemHighlighter"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox Name="textBox1" TextChanged="textBox1_TextChanged" />
        <ListBox Grid.Row="1" Name="listBox1" />
    </Grid>
</UserControl>

Code:-

using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Collections.ObjectModel;

namespace StackoverflowSpikes
{
    public partial class ItemHighlighter : UserControl
    {
        ObservableCollection<TextBlock> items = new ObservableCollection<TextBlock>();
        string[] source = new string[] { "Hello", "World", "System", "SystemDefault", "SystemFolder" };

        public ItemHighlighter()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(ItemHighlighter_Loaded);
        }

        void ItemHighlighter_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (string s in source)
            {
                TextBlock item = new TextBlock();
                item.Inlines.Add(new Run() { Text = "", FontWeight = FontWeights.Bold });
                item.Inlines.Add(new Run() { Text = s });
                items.Add(item);
            }
            listBox1.ItemsSource = items;
        }

        private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
        {
            string match = textBox1.Text;
            foreach (TextBlock item in listBox1.Items)
            {
                Run bold = ((Run)item.Inlines[0]);
                Run normal = ((Run)item.Inlines[1]);

                string s = bold.Text + normal.Text;

                if (s.StartsWith(match))
                {

                    bold.Text = s.Substring(0, match.Length);
                    normal.Text = s.Substring(match.Length);
                }
                else
                {
                    bold.Text = "";
                    normal.Text = s;
                }
            }
        }
    }
}

Slap this into a new project and have a play. Should work SL3 and 4.