WPF TreeViewItem default icon for each parent node

Question

How would I add an icon to each of these parent nodes I tried adding under each TreeViewItem but the icon doesn't show and when I bind my collection to the ItemSource, it says it must be empty fist.

<TreeView x:Name="tvMessages" HorizontalAlignment="Left" Height="262" Margin="10,37,0,0" VerticalAlignment="Top" Width="248">
                <TreeViewItem x:Name="itemsCritical" Header="Critical">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Description}"/>
                                <TextBlock Text="{Binding ID}" Visibility="Hidden"/>
                            </StackPanel>
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
                <TreeViewItem x:Name="itemsAlert" Header="Alert">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Description}"/>
                                <TextBlock Text="{Binding ID}" Visibility="Hidden"/>
                            </StackPanel>
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
                <TreeViewItem x:Name="itemsInformational" Header="Informational">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Description}"/>
                                <TextBlock Text="{Binding ID}" Visibility="Hidden"/>
                            </StackPanel>
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
            </TreeView>

dev hedgehog dev hedgehog · Accepted Answer · 2013-12-03T15:09:42

Take a look at this example:

<TreeViewItem Name="treeViewItem1" IsEnabled="True">
    <TreeViewItem.Header>
        <StackPanel Orientation="Horizontal">
            <Image Height="16" Source="Images/16x16_red_lamp.png" Width="16" />
            <TextBlock Margin="5,0" Text="HostA: Disconnected" />
        </StackPanel>
    </TreeViewItem.Header>
</TreeViewItem>

Just place the Image inside and tell the Source where is your Icon located.

You can also use HeaderTemplate in case you have Bindings against associated item.

WPF TreeViewItem default icon for each parent node

1 Answers