NodeImage

NodeImage node control allows you to show an image inside a node and supports image animation.

NodeWithImage node class#

Flexible TreeView provides a built-in NodeWithImage node class that allows you to easily display an image inside a node.

It has the Image property of System.Drawing.Image type that's automatically referenced by the NodeImage node control in the DataFieldName property.

// Create the node control in run-time (or do it in the Visual Studio designer).
NodeImage ctrl = new NodeImage();
ctrl.AttachTo(tree);

NodeWithImage node = new NodeWithImage("test", Resources.myIcon);
node.AttachTo(tree);

' Create the node control in run-time (or do it in the Visual Studio designer).
Dim ctrl As New NodeImage()
ctrl.AttachTo(tree)

Dim node As New NodeWithImage("test", Resources.myIcon)
node.AttachTo(tree)

Custom node class#

If you cannot inherit your node class from the built-in NodeWithImage, you can create a custom node class with a System.Drawing.Image property and bind it to the NodeImage node control:

class MyNode : Node
{
    public Image Icon { get; set; }

    public MyNode(string text, Image icon) : base(text)
    {
        Icon = icon;
    }
}

NodeImage ctrl = new NodeImage();
// Attach the node control to the node's Icon property.
ctrl.DataFieldName = "Icon";
tree.NodeControls.Add(ctrl);

MyNode node = new MyNode("test", Resources.myIcon);
node.AttachTo(tree);

Class MyNode
    Inherits Node

    Public Property Icon As Image

    Public Sub New(text As String, icon As Image)
        MyBase.New(text)
        Icon = icon
    End Sub
End Class

Dim ctrl As New NodeImage()
' Attach the node control to the node's Icon property.
ctrl.DataFieldName = "Icon"
tree.NodeControls.Add(ctrl)

Dim node As New MyNode("test", Resources.myIcon)
node.AttachTo(tree)

State images#

NodeImage allows automatically selecting an image to display according to the node expansion state (expanded or collapsed, etc.). You can change these images by using the StateImages treeview property. To enable this feature, set the UseStateImages node control property to true.

Animation#

NodeImage supports image animation with different effects. To enable animation, follow these steps:

1. Enable the SupportAnimation node control property.
2. Set the appropriate animation type in the bound node class's member.
3. Optionally set a delay between animation frames using the AnimationDelay node control property.

The steps below assume that:

• The nodes being added are of NodeWithAnimImage type or inherited from a custom class that has a member of ImageAnimationContext type, as shown in below.

  C#Visual Basic

  class NodeEx : Node
  {
      public ImageAnimationContext Animation;
  }
  

  Class NodeEx
      Inherits Node
      Public Animation As ImageAnimationContext
  End Class
  

• NodeImage node control instance is bound to that (Animation or custom) property.

Animation types#

Fade-out#

NodeImage supports fade-out animation, which fades out and fades in the specified images sequence.

FadeOutImageAnimation context;

// You should add an image with name 'image_to_fadeout' to your project's resources.
context = new FadeOutImageAnimation(Resources.image_to_fadeout); 
// Image's opacity high level for animation.
context.OpacityHighLevel = 255;
// Image's opacity low level for animation.
context.OpacityLowLevel = 100;
// Image's opacity increment size for animation.
context.OpacityIncrement = 20;
node.Animation = context;

Dim context As FadeOutImageAnimation

' You should add an image with name 'image_to_fadeout' to your project's resources.
context = New FadeOutImageAnimation(Resources.image_to_fadeout)
' Image's opacity high level for animation.
context.OpacityHighLevel = 255
' Image's opacity low level for animation.
context.OpacityLowLevel = 100
' Image's opacity increment size for animation.
context.OpacityIncrement = 20
node.Animation = context

Sequence#

NodeImage supports sequence animation by switching images one after another.

SequenceImageAnimation context;

// Define the sequence of images for animation.
context = new SequenceImageAnimation(new Bitmap[] 
{ 
    Resources.frame1, 
    Resources.frame2, 
    Resources.frame3 
});
node.Animation = context;

Dim context As SequenceImageAnimation

' Define the sequence of images for animation.
context = New SequenceImageAnimation(New Bitmap() 
{ 
    Resources.frame1, 
    Resources.frame2, 
    Resources.frame3 
})
node.Animation = context

Stop animation#

To stop animation for a node, set the Animation.Enabled node property to false.

Static image and animation with single node control#

Node control can bind to only one node class member. If you want to show both a static image and an animation simultaneously in different nodes using one NodeImage node control, use the NodeWithAnimImage node class as shown below:

NodeWithAnimImage node1 = new NodeWithAnimImage();
NodeWithAnimImage node2 = new NodeWithAnimImage();
// For a node with static image.
node1.Animation = new SequenceImageAnimation(Resources.MyStaticImage);

// For a node with animation, define an animation frames source.
// Note that you can use other image animation classes here (FadeOutImageAnimation for example).
node2.Animation = new SequenceImageAnimation(new Bitmap[] 
{ 
    Resources.frame1, 
    Resources.frame2, 
    Resources.frame3 
});

Dim node1 As New NodeWithAnimImage()
Dim node2 As New NodeWithAnimImage()
' For a node with static image.
node1.Animation = New SequenceImageAnimation(Resources.MyStaticImage)

' For a node with animation, define an animation frames source.
' Note that you can use other image animation classes here (FadeOutImageAnimation for example).
node2.Animation = New SequenceImageAnimation(New Bitmap() 
{ 
    Resources.frame1, 
    Resources.frame2, 
    Resources.frame3 
})

This will show a static image, Resources.MyStaticImage, for node1 node and sequence animation for node2 node.

Change image under the mouse cursor#

HoverDataFieldName#

Alongside displaying a static image, NodeImage node control also adds dynamism to the interaction with a user by displaying another image when the mouse cursor hovers over the node control.

To display such an image, use the HoverDataFieldName property and specify a node class member where an alternative image is stored. That image will be displayed when the mouse cursor hovers over the node control, and then the original image specified in the DataFieldName property will be displayed when the mouse cursor moves away from the node control.

UseHoverImageForSelectedNode#

Since NodeImage can display an image different from that indicated in the DataFieldName property when the mouse cursor hovers over the node control, there can be uncertainty about which image to display when a node is selected or focused.

To address this, NodeImage has the UseHoverImageForSelectedNode property that specifies which image to use for a selected or focused node: the one defined in the HoverDataFieldName or DataFieldName property.

Disable the UseHoverImageForSelectedNode (by default) to display the image specified in the DataFieldName property for the selected node, or enable it to display the image specified in the HoverDataFieldName property.