Add Icons in WPF Tree View

• Download source - 395.87 KB

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

• 22^nd April, 2008: Initial post