Add Icons in WPF Tree View






2.80/5 (11 votes)
Article describes how to add icons in WPF TreeView
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