Click here to Skip to main content
Click here to Skip to main content

Add Icons in WPF Tree View

By , 21 Apr 2008
Rate this:
Please Sign up or sign in to vote.

Introduction

Through this article, I want to give an idea of how to add images for the WPF Tree View nodes. It is not a big deal to provide the icons functionality with Windows Forms Tree View. But in WPF, there is no direct support of adding the images at nodes of Tree View.

Background

As I mentioned above, in Windows Forms Tree View the process of adding the icons was very similar. TreeView control provides the ImageList property. A custom list of images can be directly attached to this property. Below is the small sample of code, I have taken this idea from one of the blogs in MSDN:

//Create a Root Node for TreeView 
treeView.Nodes.Add("RootNode"); 
//Create Child Nodes for TreeView 
TreeNode rootNode = treeView.Nodes[0]; 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.ExpandAll(); 
//Create an Imagelist 
ImageList imageList = CreateImageList(); 
//Add the ImageList to TreeView 
treeView.ImageList = imageList; 
//Set the Starting Image Index 
treeView.ImageIndex = 1; 

Using the Code

Let's create a new customized class (say TreeViewWithIcons) derived from TreeViewItem. This class provides us the properties for adding the icons/images as well as for setting the text for a Node.

SelectedImage is the property which allows the user to attach an image with the node and similarly the HeaderText property allows us to set the text for a Node.

/// <summary>
/// This Class Provides the TreeView with extended functionalities like,
/// Adding the HeaderText feature to Node, Setting the icon for TreeViewNode.
/// </summary>

    public class TreeViewWithIcons : TreeViewItem
    {
    #region Global variables
    ImageSource iconSource;
    TextBlock textBlock;
        Image icon;
    #endregion Global variables

    #region Constructors and Destructors
    public TreeViewWithIcons()
        {
            StackPanel stack = new StackPanel();
            stack.Orientation = Orientation.Horizontal;
            Header = stack;
            //Uncomment this code If you want to add an Image after the Node-HeaderText
            //textBlock = new TextBlock();
            //textBlock.VerticalAlignment = VerticalAlignment.Center;
            //stack.Children.Add(textBlock);
            icon = new Image();
            icon.VerticalAlignment = VerticalAlignment.Center;
            icon.Margin = new Thickness(0, 0, 4, 0);
            icon.Source = iconSource;
            stack.Children.Add(icon);
            //Add the HeaderText After Adding the icon
            textBlock = new TextBlock();
            textBlock.VerticalAlignment = VerticalAlignment.Center;
            stack.Children.Add(textBlock);
        }
        #endregion Constructors and Destructors
        #region Properties
        /// <summary>
        /// Gets/Sets the Selected Image for a TreeViewNode
        /// </summary>
        public ImageSource Icon
        {
            set
            {
                iconSource = value;
                icon.Source = iconSource;
            }
            get
            {
                return iconSource;
            }
        }
        #endregion Properties
        #region Event Handlers
        /// <summary>
    /// Event Handler on UnSelected Event
    /// </summary>
    /// <param name="args">Eventargs</param>
    protected override void OnUnselected(RoutedEventArgs args)
    {
        base.OnUnselected(args);
        icon.Source = iconSource;
    }
    /// <summary>
    /// Event Handler on Selected Event 
        /// </summary>
        /// <param name="args">Eventargs</param>
        protected override void OnSelected(RoutedEventArgs args)
        {
        base.OnSelected(args);
        icon.Source = iconSource;
        }

        /// <summary>
        /// Gets/Sets the HeaderText of TreeViewWithIcons
        /// </summary>
        public string HeaderText
        {
            set
            {
                textBlock.Text = value;
            }
            get
            {
                return textBlock.Text;
            }
        }
        #endregion Event Handlers
    }

How to Use the Custom Class

As soon as you get this class, things are very simple. Just create an instance of our TreeViewWithIcons class and set the HeaderText and SelectedImage property. Attach this node to the main TreeView. That’s it……

TreeViewWithIcons node = new TreeViewWithIcons(); 
node.HeaderText = "Root Node"; 
node.Icon = CreateImage(Directory.GetCurrentDirectory() + \\Workflow.ico); 
TreeViewWithIcons node1 = new TreeViewWithIcons(); 
node1.HeaderText = "Child Node"; 
node1.Icon = CreateImage(Directory.GetCurrentDirectory() + \\ArrowRight-Green.ico); 
tv.Items.Add(node); 
node.Items.Add(node1); 

Note: A sample application has been attached for better understanding.

History

  • 22nd April, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

ANURAG VISHNOI
Technical Lead SAP Labs India Ltd., Gurgaon, Haryana, India
India India
I am a Sr. Software Developer in a well known MNC Software Company SAP Labs, located in Bangalore. Which is in National Capital Region of India. I have around 5 years of experience in C#.net technologies. I would like to read and write the articles related to Dot Net framework as well as Object Oriented Concepts.

Comments and Discussions

 
Questionthanks for the solution Pinmemberteek132-May-12 5:42 
GeneralMy vote of 1 PinmemberJamesBond007x14-Jul-11 15:55 
GeneralNot working PinmemberRocky Pham24-Sep-09 12:59 
GeneralYou have it wrong in my opinion PinmvpSacha Barber9-Apr-09 22:23 
GeneralRightClick Question PinmemberToby.Berster7-Oct-08 6:10 
AnswerRe: RightClick Question PinmemberANURAG VISHNOI7-Oct-08 23:45 
GeneralDownload Problem PinmemberHrushiPatil25-Jul-08 1:40 
GeneralRe: Download Problem PinmemberANURAG VISHNOI25-Aug-08 19:36 
GeneralFile Download Pinmemberwfm29-Apr-08 16:00 
GeneralRe: File Download PinmemberANURAG VISHNOI7-May-08 1:09 
GeneralProgram Crash Pinmember Sarath. 21-Apr-08 22:29 
GeneralRe: Program Crash PinmemberANURAG VISHNOI22-Apr-08 23:55 
AnswerRe: Program Crash PinmemberANURAG VISHNOI22-Apr-08 23:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 22 Apr 2008
Article Copyright 2008 by ANURAG VISHNOI
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid