Question

Consider the following scenario:

• I have a ListView that is bound to an ObservableCollection using the DataContext:

  <ListView ItemsSource="{Binding}">
  

  The class containing the string data uses the DependencyProperty mechanism to keep the displayed content synced with the data collection.

• The ListView has one column that is editable (I followed the tutorial here to achieve this); the ListViewItem is then either a TextBlock or a TextBox. This is done using a DataTemplate and two Style resources.
• I’d like to format the string displayed in the TextBlock based on a search string. Specifically, I’d like to format the items of the ListView to become bold as the user types in their search query if there is a match (only the characters that match in sequence should be made bold). This only needs to be displayed for the text currently being rendered using the TextBlock (that is, text not currently being edited).

I’ve considered using an IMultiValueConverter that takes in a reference to the TextBlock that renders the data so that I can format the text appropriately. However, this will destroy the binding that I’ve set up:

<TextBlock.Text>
  <MultiBinding Converter="{StaticResource searchFormatter}" ConverterParameter="{x:Reference Name=txtSearch}">
    <MultiBinding.Bindings>
      <Binding Path="NameOfBoundDependencyProperty"/>
      <Binding RelativeSource="{RelativeSource Self}"/>
    </MultiBinding.Bindings>
  </MultiBinding>
</TextBlock.Text>

searchFormatter being the IMultiValueConverter and txtSearch being the TextBox containing the search query.

I’m still learning WPF so I’m not familiar with the best approach or to what’s possible. Is there a way to keep the data bound (so that edits reflect in the collection and the ListView) and still represent the data differently to the user (so that search matches may be bold)? Perhaps it would be cleaner if I manage the binding manually?

Answer 1

I decided to use a Control that supports HTML so that I could use an IValueConverter to update the value of the displayed text on the fly without affecting any active bindings. I used the code from here and modified it so that it looked like a TextBlock within my ListView:

BorderBrush = Brushes.Transparent;
SelectionBrush = Brushes.Transparent;
Cursor = Cursors.Arrow;
BorderThickness = new Thickness(0);
Background = Brushes.Transparent;

However, I still needed to trigger the IValueConverter so that the display is updated as the user types in their search query (code from here):

ICollectionView view = CollectionViewSource.GetDefaultView(ItemsSource);
view.Refresh();

I didn’t want to slow down the search process so I only forced this refresh if there was actually a match (or if the state of having a match moves to no match). My IValueConvertor simply inserted the bold tags to match the search query:

<RichTextBox Text="{Binding Path=DisplayItem, Converter={StaticResource searchFormatter}, ConverterParameter={x:Reference txtSearch}}"/>

Where searchFormatter this time is an IValueConvertor.