How to programmatically replace the icon of a TreeViewItem?

Question

In my current project I've got a WPF TreeView and added items like this:

<TreeViewItem Name="treeViewItem6" IsEnabled="False">
  <TreeViewItem.Header>
    <StackPanel Orientation="Horizontal">
        <Image Height="16" Source="Images/16x16_green_lamp.png" Width="16" />
        <TextBlock Margin="5,0" Text="Status: Connected" />
    </StackPanel>
  </TreeViewItem.Header>
</TreeViewItem>

I would like to replace an icon as well as the text of a TextBlock in my C# code to make it look like this:

Is there an easy way to programmatically replace the icon as well as the text of a TreeViewItem or do I have to iterate through the entire tree of sub items? (Unfortunately I'm a WPF novice and I'm more used to the good old WinForms)

Answer 1

To change the source of the image and the text of a textblock you can give the controls a name like this:

<Image Name="imgIcon" Height="16" Source="Images/16x16_green_lamp.png" Width="16" />
<TextBlock Name="tbStatus" Margin="5,0" Text="Status: Connected" />

That way you can change the properties you want to change easily programmatically, like this:

Image img = FindResource("red") as Image;
if (img != null) imgIcon.Source = img.Source;

tbStatus.Text = "Status: Disconnected";

To find the "green" and "red" resources you can add them to the XAML like this:

<Window.Resources>
    <Image x:Key="green" Source="Images/16x16_green_lamp.png" />
    <Image x:Key="red" Source="Images/16x16_red_lamp.png" />
</Window.Resources>

Of course you will need additional logic to determine the status, but this will get you started.

Answer 2

Instead of hardcoding the path to your image you can actually bind the image source to a string property in your ViewModel. The string property needs to represent the uri to the image you want to display. Once you change the string property (and fire the OnPropertyChanged event) your UI will automatically change the image. WPF has a build in converter for images so you should not worry too much about that. Here is how your binding should look like:

<Image Source="{Binding ImageSource}" />

Where ItemSource is a string property in your view model.

Hope that helps.

Answer 3

How do you generate the tree? Is there any Data Binding there? If the tree is constructed manually, why don't you simply give names to the elements that you want to change, and then in code reference those elements:

<TreeViewItem Name="treeViewItem6" IsEnabled="False">
    <TreeViewItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image x:Name="StatusImage" Height="16" Source="Images/16x16_green_lamp.png" Width="16" />
            <TextBlock x:Name="StatusText" Margin="5,0" Text="Status: Connected" />
        </StackPanel>
    </TreeViewItem.Header>
</TreeViewItem>

Then, in C# code:

...
this.StatusImage.Source="...";  // a new ima
this.StatusText.Text = "....;

For the image source, you'll need to generate it (text is not enough): new BitmapSource( new Uri( "image uri" ) )

You should construct it once and cache it.