How to implement WPF TreeView with icons

  • Makale

[Sergei Meleshchuk. https://blogs.msdn.com/sergeim/\] 

The trick is to use StackPanel (example below). The StackPanel contains image and text. 

One of many ways to implement this is:

- Create folder with icons and deploy the folder to the same directory where the .exe file lives.
  Note: If using IDE, copy this folder from project directory to target with the post-build step:
  xcopy /sy "$(ProjectDir)icons\*" "$(TargetDir)icons\*"

- When initializing your app, compute location of the 'icons' folder:
    Settings.IconsFolder = GetIconFolder(); // IconsFolder is string

    where the 'GetIconsFolder' is like below:

private string GetIconFolder()

{

string execName =

Assembly.GetExecutingAssembly().

GetModules()[0].FullyQualifiedName;

string currentFolder = System.IO.

Path.GetDirectoryName(execName);

string icons = System.IO.Path.Combine(

currentFolder, "icons");

return icons;

}

 - Add TreeViewItem with the code like below:

TreeViewItem tvi = CreateTreeViewItem(

    "samplename",

    Settings.IconsFolder,

    "sample.ico");

treeView1.Items.Add(tvi);

where the 'CreateTreeViewItem' is your little wrapper:

private TreeViewItem CreateTreeViewItem(

string header,

string iconFolder,

string iconName)

{

    TreeViewItem child = new TreeViewItem();

    StackPanel pan = new StackPanel();

    if (iconName != null)

    {

        pan.Orientation = Orientation.Horizontal;

        IconBitmapDecoder icon = new IconBitmapDecoder(

            new Uri(System.IO.Path.Combine(

iconFolder,

iconName),

UriKind.RelativeOrAbsolute),

            BitmapCreateOptions.None,

            BitmapCacheOption.OnLoad);

        Image image = new Image();

        image.Height = 16;

        image.Source = icon.Frames[0];

        pan.Children.Add(image);

    }

    pan.Children.Add(new TextBlock(new Run(" " + header)));

    child.Header = pan;

    return child;

}

That's it.

Comments

  • Anonymous
    January 06, 2011
    Thank you for making this so simple and saving me days of work.

  • Anonymous
    March 04, 2011
    The comment has been removed

  • Anonymous
    December 26, 2011
    Hi, How can I exploit your function ? For get the SelectItem, when I clicking on the Treeview ? Best regards, Philippe G.

  • Anonymous
    August 12, 2015
    thank you so much! easily the best and simplest implementation i have seen thus far! XAML is still confusing to me lol! Thanks a ton again!