Treeviewitem with images programmatically

Question

I have this code for creating the TreeViewitems which I later add to the TreeView. This is all done programmatically.

TreeViewItem tvi = new TreeViewItem {
                                        Header = ni.name,
                                        Uid = itemName,
                                        Background = color 
                                    };

I wanna be able to add images as icons for the TreeViewItems programmatically. I am doing this but all I can see in the TreeView is items named as System.Windows.Controls.StackPanel which is weird. Also there are no images shown. I am using this in my code. Please help:

TreeViewItem tvi = new TreeViewItem
{
    Header = new System.Windows.Controls.StackPanel
    {
        Children = 
        {
            new System.Windows.Controls.Image{Source = b},
            new System.Windows.Controls.TextBlock
            {
                Text = ni.name
            }
        }
    },

    Uid = itemName,
    Background = color
};

I also tried the XAML based approach. My XAML based approach looks like below XAML:

<TreeView ItemsSource="{Binding}" Grid.Row="1" Grid.Column="0" Name="TreeView1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TreeViewItem.Selected="TreeViewItem_OnItemSelected">
    <TreeView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path= iName}" Margin="5,0" />    
            </StackPanel>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Instead of adding tvi like earlier,i do this:

//  node.Items.Add(tvi); //for non-xaml approach
var ti = new TreeItem { iName = ni.name};
node.Items.Add(ti);

My TreeItem class looks like this:

namespace DeveloperTool
{
    public class TreeItem
    {
        public string iName
        {
            get; set;
        }     
    }
}

Even for this approach I use, I see TreeViewItems with names DeveloperTool. TreeItem instead of the actual name I am binding to. For simplicity i just tried with the TextBlock first (excluding the image). Can someone please review what i am doing wrong here. Both approaches result in the same kind of situation.

Answer 1

The issue based upon your samples is the need for a header template. Add this snippet to your TreeView declaration...

        <TreeView.Resources>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image  Margin="2"  Source="{Binding ...}"/>
                                <TextBlock Text="{Binding}"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.Resources>

This gives you a HeaderTemplate that you can bind to. Of course you have to add the right binding features to get this snippet to compile and work, but otherwise most of your existing code can be salvaged.