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:
treeView.Nodes.Add("RootNode");
TreeNode rootNode = treeView.Nodes[0];
rootNode.Nodes.Add("A");
rootNode.Nodes.Add("A");
rootNode.Nodes.Add("A");
rootNode.Nodes.Add("A");
rootNode.ExpandAll();
ImageList imageList = CreateImageList();
treeView.ImageList = imageList;
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.
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;
icon = new Image();
icon.VerticalAlignment = VerticalAlignment.Center;
icon.Margin = new Thickness(0, 0, 4, 0);
icon.Source = iconSource;
stack.Children.Add(icon);
textBlock = new TextBlock();
textBlock.VerticalAlignment = VerticalAlignment.Center;
stack.Children.Add(textBlock);
}
#endregion Constructors and Destructors
#region Properties
public ImageSource Icon
{
set
{
iconSource = value;
icon.Source = iconSource;
}
get
{
return iconSource;
}
}
#endregion Properties
#region Event Handlers
protected override void OnUnselected(RoutedEventArgs args)
{
base.OnUnselected(args);
icon.Source = iconSource;
}
protected override void OnSelected(RoutedEventArgs args)
{
base.OnSelected(args);
icon.Source = iconSource;
}
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