Version

Add Multiple Images to a Node

This topic will describe how to add multiple images to a node. Images may be added to the left or right of the node text using the LeftImages and RightImages Collections.

These image collections are in addition to the normal node Image which is part of the node’s Appearance.

This can be done with or without an ImageList control.

  1. Before you start writing any code, you should place using/imports directives in your code-behind so you don’t need to always type out a member’s fully qualified name.

In Visual Basic:

Imports Infragistics.Win.UltraWinTree

In C#:

using Infragistics.Win.UltraWinTree;

  1. Add an ImageList control to your form to store the different images. You can use any number of images, but for the purposes of this topic, assume you have at least 2 images.

  2. Before you can add images to a node, you will need a reference to the node in question. You can do this in a number of ways. For this topic, you will add images to the first node in the Tree.

In Visual Basic:

Private Sub AddMultipleImagestoaNode_Load(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MyBase.Load
	Me.UltraTree1.ImageList = Me.ImageList1
	Dim aNode As UltraTreeNode
	aNode = UltraTree1.Nodes(0)
End Sub

In C#:

private void AddMultipleImagestoaNode_Load(object sender, EventArgs e)
{
	this.ultraTree1.ImageList = this.imageList1;
	UltraTreeNode aNode;
	aNode = ultraTree1.Nodes[0];
}

  1. To add an image to a node on the left of the text, add the image to the LeftImages Collection. The number 0 in the code above is the index of the image in the ImageList. To add an image to a node on the right of the text, add the image to the RightImages Collection.

In Visual Basic:

aNode.LeftImages.Add(0)
aNode.RightImages.Add(0)

In C#:

aNode.LeftImages.Add(0);
aNode.RightImages.Add(0);

  1. You can add as many images as you like to either the LeftImages or RightImages collections. The images will appear on the node in the same order in which they are in the collection.