LIDOR SYSTEMS

Advanced User Interface Controls and Components

Image Animation in TreeView .NET

Created: Jan 27, 2010

Updated: Jun 02, 2013

In cases when you need to notify the user that node content is updating, like dynamic loading of child nodes, the best is to use animated image. The IntegralUI TreeView commes with support to use animated gifs. There are three locations where an animated image can be placed: state image, node icon and content image.

treeview with animated gifs
Download free sample

There are several methods that can be used to start/stop image animation. Depending on which node or specific image in the node needs to be animated use the appropriate method. Here is a list of all methods available:

  • To start animation for all images in specific node

    StartAnimation(ListBaseItem item)


  • To start animation of a specific image in node

    StartAnimation(ListBaseItem item, Image img)


  • To start animation of a specific image added to the node by using XML tags. The id is the attribute of the <img> tag

    StartAnimation(ListBaseItem item, String id)


  • To stop animation for all images in specific node

    StopAnimation(ListBaseItem item)


  • To stop animation of a specific image in node

    StopAnimation(ListBaseItem item, Image img)


  • To stop animation of a specific image added to the node by using XML tags. The id is the attribute of the <img> tag

    StopAnimation(ListBaseItem item, String id)


To start animation in first place, the node must have its AllowImageAnimation property set to True. Because a node can have many images placed in different loications in its content space, for content image to be animated the animate attribute of the <img> needs to be set to True.

Note - The ListBaseItem class is the base class from which TreeNode class inherits.

Here is an example how to start/stop animation of images placed at different locations in selected node:

private void btnStart_Click(object sender, EventArgs e)

{

if (this.treeView1.SelectedNode != null)

{

// At first allow image animation

this.treeView1.SelectedNode.AllowImageAnimation = true;

 

// To animate state image (the one to the far left of the node)

this.treeView1.StartAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.StateImage);

 

// To animate node icon. It case when node is selected or not

this.treeView1.StartAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.Image);

this.treeView1.StartAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.SelectedImage);

 

// This animates images inside item content.

// Use the content image indentifer

this.treeView1.StartAnimation(this.treeView1.SelectedNode, "0");

 

// This animates all images

this.treeView1.StartAnimation(this.treeView1.SelectedNode);

}

}

private void btnStop_Click(object sender, EventArgs e)

{

if (this.treeView1.SelectedNode != null)

{

// Stop image animation

this.treeView1.SelectedNode.AllowImageAnimation = false;

 

// To animate state image

this.treeView1.StopAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.StateImage);

 

// To stop animation of node icon. It case when node is selected or not

 

this.treeView1.StopAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.Image);

this.treeView1.StopAnimation(this.treeView1.SelectedNode, this.treeView1.SelectedNode.SelectedImage);

 

// This stops animation of images inside item content.

// Use the content image indentifer

this.treeView1.StopAnimation(this.treeView1.SelectedNode, "0");

 

// To stop all animations

this.treeView1.StopAnimation(this.treeView1.SelectedNode);

}

}

Private Sub btnStart_Click(ByVal sender As Object, ByVal e As EventArgs)

If Me.treeView1.SelectedNode IsNot Nothing Then

' At first allow image animation

Me.treeView1.SelectedNode.AllowImageAnimation = True

 

' To animate state image (the one to the far left of the node)

Me.treeView1.StartAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.StateImage)

 

' To animate node icon. It case when node is selected or not

Me.treeView1.StartAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.Image)

Me.treeView1.StartAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.SelectedImage)

 

' This animates images inside item content.

' Use the content image indentifer

Me.treeView1.StartAnimation(Me.treeView1.SelectedNode, "0")

 

' This animates all images

Me.treeView1.StartAnimation(Me.treeView1.SelectedNode)

End If

End Sub

Private Sub btnStop_Click(ByVal sender As Object, ByVal e As EventArgs)

If Me.treeView1.SelectedNode IsNot Nothing Then

' Stop image animation

Me.treeView1.SelectedNode.AllowImageAnimation = False

 

' To animate state image

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.StateImage)

 

' To stop animation of node icon. It case when node is selected or not

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.Image)

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode, Me.treeView1.SelectedNode.SelectedImage)

 

' This stops animation of images inside item content.

' Use the content image indentifer

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode, "0")

 

' To stop all animations

Me.treeView1.StopAnimation(Me.treeView1.SelectedNode)

End If

End Sub

A complete sample project in C# .NET and VB .NET, showing how to add animated gifs to each node in TreeView, is available for download from here: TreeView .NET - Image Animation

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.