How to make part of TreeViewItem Header bold?

Question

I am trying to implement a simple search feature in SQL and wpf... I need to highlight only part of the next in results that has been entered in a TextBox .

So I do the search in SQL get the results and put them on a TreeViewItem that adds them to a TreeView . That all works but how would i go around making only a certain part of TreeViewItem Header bold?

I already know how to find where the part of the text I want bold is but i just need to make it bold.

TreeViewItem root_item = new TreeViewItem() { Header = "Users" };
FoundUsersTreeView.Items.Add(root_item);
while (sqlReader.Read()) 
{
    TreeViewItem new_item = new TreeViewItem() { Header = sqlReader.GetString(0) };
    root_item.Items.Add(new_item);
}

Answer 1

You can achieve this using HeaderTemplate of your TreeViewItem . As you're adding TreeViewItem from code behind, you can use the Tag property to differentiate which one need to be set as Bold .

You can add below DataTemplate to your Resources .

DataTemplate

<DataTemplate x:Key="headerTemplate">
    <TextBlock Text="{Binding}">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource AncestorType=TreeViewItem, Mode=FindAncestor}}" 
                                 Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</DataTemplate>

Code Behind

TreeViewItem root_item = new TreeViewItem() { Header = "Users" };
treeView.Items.Add(root_item);
while (sqlReader.Read()) 
{
    var new_item = new TreeViewItem { Header = sqlReader.GetString(0), Tag = true };
    new_item.HeaderTemplate = Resources["headerTemplate"] as DataTemplate;
    root_item.Items.Add(new_item);
}

You can set boolean value to Tag property to make that Node as Bold .

Answer 2

If you're going to use wpf for any substantial work, you should use MVVM. Working directly with controls is OK for very simple stuff but the difficulty ramps up very quickly. You should Bind data and template that into controls instead.

This is how WPF is intended to be used.

Work with the base data rather than controls.

If you take a look at this sample:

https://gallery.technet.microsoft.com/WPF-Highlight-Matching-71ad5a04

It works with a listview rather than treeview and highlights text by making the background red. Not exactly what you need. But the principle is the thing to look at.

You could easily change the listview used to a treeview.

Having said that, you only seem to have on level of items in your treeview, so you pretty much might as well use a listview anyhow.

Anyhow.

If you take a look, you'll see each item is split up using a regex so there's a separate RunHi viewmodel for each piece. Matching pieces have IsMatch set to true on their RunHi. These are templated into a horizontal listview - so it looks like one textblock but is in fact one or more arranged one after the other. Each row of the listview is itself a listview. You could of course make the header of each treeviewitem a listview if you particularly want a treeview.

A datatrigger is used to make the background yellow. To make it bold instead you can just change that part:

  <ControlTemplate TargetType="{x:Type ListViewItem}">
      <TextBlock Text="{Binding Text}">
           <TextBlock.Style>
                  <Style TargetType="TextBlock">
                       <Style.Triggers>
                             <DataTrigger Binding="{Binding IsMatch}" Value="True">
                                   <Setter Property="FontWeight" Value="Bold"/>
                              </DataTrigger>
                        </Style.Triggers>
                   </Style>
              </TextBlock.Style>
         </TextBlock>
     </ControlTemplate>