NodeImage node control

NodeImage allows you to show an image inside a node and supports image animation. Note that it supports only 32 bit per pixel bitmaps at this time.

Example:

Use the built–in NodeWithImage node class to show an image:

// 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", Recources.myIcon);
node.AttachTo(tree);

class MyNode : Node
{
  private Bitmap m_Icon;
 
  public Bitmap Icon { get { return m_Icon; } set { m_Icon = value; } }
 
  public MyNode(string pText, Bitmap pIcon) : base(pText)
  {
    Icon = pIcon;
  }
}
 
NodeImage ctrl = new NodeImage();
// attach the node control to the node`s Icon property.
ctrl.DataFieldName = "Icon";
tree.NodeControls.Add(ctrl);
 
NodeEx node = new MyNode("test", Recources.myIcon);
node.AttachTo(tree);

State images

NodeImage allows you to auto–show images according to the node`s state (expanded or collapsed, etc.). You can change these images in the StateImages treeview property. To enable this feature, enable the UseStateImages node control property.

Animation

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

• Enable the SupportAnimation property;
• Set the appropriate animation type in the bound node class`s member;
• Optionally set a delay between animation frames using the AnimationDelay property.

All descriptions below assume that:

• You are adding nodes with NodeWithAnimImage or a custom type with a member of the ImageAnimationContext type.
  Example:
  

  class NodeEx : Node
  {
    public ImageAnimationContext Animation;
  }

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

Animation types

Fade out animation

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

Example:

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;

Sequence animation

NodeImage supports sequence animation by changing images one after the other.

Example:

SequenceImageAnimation context;
 
// 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, disable the Animation.Enabled node property.

Mix a static image and animation using one node control

Node control can bind to only one node class`s 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 stated below:

// for a node with static image.
node.Animation = new SequenceImageAnimation(Resouces.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, Resouces.MyStaticImage, for one node and sequence animation for other.

Change image when under the mouse cursor

HoverDataFieldName

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

 
 
In order to display such an image use the HoverDataFieldName property and specify a node class member where an alternative image is stored. Flexible TreeView will do the rest of the work. 

UseHoverImageForSelectedNode

Since when the mouse cursor hovers over the node control NodeImage can display an image different from that indicated in the DataFieldName property, there can be a doubt what image to display when a node is selected or focused.  To respond to this problem NodeImage presents the UseHoverImageForSelectedNode property that specifies what image to use for a selected or focused node: the one defined in the HoverDataFieldName or DataFieldName property.