Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Issiah]

We are trying to replace another tree view control with the FlexibleTreeView control in a current project. This has prompted a question which I have about creating new image based nodes with a static image for certain levels.

An example would be a tree view which contains three levels:

0
[-]1
[--]2

Levels 0 and 1 should essentially be static images which should be set to one of two values based on whether the node is collapsed or not.

I've attempted to do this but have been unsuccessful in getting this to work. An example of what I'm talking about is below:

Code: [Select]


                    MainTreeView.Clear();
                    MainTreeView.BeginUpdate();

                    BaseNodeEx batchN, docN, imageN;
                    Bitmap imageNodeIMG;

                    Bitmap batchIMG = new Bitmap(@"X:\Resources\Images\Batch.bmp");
                    Bitmap batchThumbnail = new Bitmap(batchIMG, new Size(116, 150));
                    batchN = new BaseNodeEx()
                        {
                            Text = scanBatch.Name,
                            Image = batchIMG
                        };

                    batchN.Type = BaseNodeEx.NodeType.Batch;

                    for (int d = 0; d < Documents.Count; d++)
                    {
                        docN = new BaseNodeEx("Doc: " + (d + 1).ToString());
                        docN.Type = BaseNodeEx.NodeType.Document;
                        for (int p = 0; p < Pages.Count; p++)
                        {
                            imageNodeIMG = new Bitmap(Pages[p].ImagePath);

                            Bitmap thumbnail = new Bitmap(imageNodeIMG, new Size(116, 150));

                            imageN = new BaseNodeEx()
                            {
                                Text = "Page: " + (p + 1).ToString(),
                                Image = thumbnail
                            };

                            imageN.Type = BaseNodeEx.NodeType.Image;
                            imageN.AttachTo(docN);
                        }
                        docN.AttachTo(batchN);
                    }

                    batchN.AttachTo(MainTreeView);
                    MainTreeView.EndUpdate();


The attached image shows the result of the above code. What is the proper way to accomplish what I'm attempting?

Thanks in advance.

P.S.

We only have two days left on our trial period is there any way to have this extended?

[Ruslan]

Hello and thank you for your interest to our product!

As I understood, you need three levels (batch/doc/page) and batch/pages should have an image. This image should be changed according to whether the node is expanded or collapsed. If so, from your code I can`t understand which image should be used for different node states? You create (load) a big image:

Code: [Select]

Bitmap batchIMG = new Bitmap(@"X:\Resources\Images\Batch.bmp");and then create a thumbnail and set it to the node:

Code: [Select]

Bitmap batchThumbnail = new Bitmap(batchIMG, new Size(116, 150));
batchN = new BaseNodeEx()
{
Text = scanBatch.Name,
Image = batchIMG
};So node will always use this thumbnail. Also, without knowing your BaseNodeEx type and tree`s design-time code it is hard to suggest something useful.
To provide different images for every node`s state and for every node you need to handle the NodeExpanded treeview event and change that node`s image according to the node state. If that`s what you need, we`ll provide you a sample.

Sorry, we don`t have a functionality to extend the trial period. You can install Flexible TreeView on the other computer to continue evaluation.

[Encore]

Ruslan,

Thanks for the quick response.

Essentially what I'm saying is that the assignment of any of the higher level nodes results in a blank node image, node state or not it won't seem to display anything into those higher level nodes, I know this because I've confirmed it is loading the image into the node just not displaying it. The node image states are really a separate issue which I was asking for an explanation on what the best implementation methodology was for that function.

The example I gave didn't include that.

The BaseNodeEx class is as follows:

Code: [Select]

/// <summary>
        /// Base extended node class (derived from NodeWithImage). The Type property is set to Image by default.
        /// </summary>
        public class BaseNodeEx : NodeWithImage
        {
            Bitmap _icon;
            NodeType _type = NodeType.Image;

            public BaseNodeEx()
                : base()
            {
            }

            public BaseNodeEx(string text)
                : base(text)
            {

            }

            public BaseNodeEx(string text, Bitmap icon)
                : base(text)
            {
                _icon = icon;
            }

            public Bitmap Icon
            { get { return _icon; } set { _icon = value; } }

            public NodeType Type
            {
                get { return _type; }
                set { _type = value; }
            }

            public enum NodeType
            {
                Batch,
                Document,
                Image
            }
        }
MainTreeView, nodeIMG, nodeTextBox Design Definitions

Code: [Select]

        private ARMSoft.FlexibleTreeView.FlexibleTreeView MainTreeView;
        private ARMSoft.FlexibleTreeView.NodeControls.NodeImage nodeIMG;
        private ARMSoft.FlexibleTreeView.NodeControls.NodeTextBox nodeTextBox;


            //
            // MainTreeView
            //
            this.MainTreeView.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
                        | System.Windows.Forms.AnchorStyles.Left)));
            this.MainTreeView.DragDropOptions.AllowDrag = true;
            this.MainTreeView.DragDropOptions.AllowDrop = true;
            this.MainTreeView.DragDropOptions.DropMarkColor = System.Drawing.Color.FromArgb(((int)(((byte)(215)))), ((int)(((byte)(227)))), ((int)(((byte)(188)))));
            this.MainTreeView.FocusedNodeStyle.FocusRectShift = 4;
            this.MainTreeView.Font = new System.Drawing.Font("Consolas", 8.25F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
            this.MainTreeView.Location = new System.Drawing.Point(12, 180);
            this.MainTreeView.Name = "MainTreeView";
            this.MainTreeView.NodeControls.Add(this.nodeIMG);
            this.MainTreeView.NodeControls.Add(this.nodeTextBox);
            this.MainTreeView.Options.Appearance.AntiAlias = true;
            this.MainTreeView.Options.Appearance.GrayscaleWhenDisabled = true;
            this.MainTreeView.Options.Appearance.ShowHorzLines = true;
            this.MainTreeView.Options.Selection.AllowEmptySelection = false;
            this.MainTreeView.Options.Selection.HighlightMode = ARMSoft.FlexibleTreeView.eNodeHighlightMode.ContentOnly;
            this.MainTreeView.Options.Selection.HoverStyle = ARMSoft.FlexibleTreeView.eHoverStyle.SoftSelect;
            this.MainTreeView.Options.Selection.SelectionMode = ARMSoft.FlexibleTreeView.eNodeSelectionMode.MultiSameLevel;
            this.MainTreeView.Options.Selection.ValidateNodeSelection = true;
            this.MainTreeView.Padding = new System.Windows.Forms.Padding(4);
            this.MainTreeView.PreferredNodeHeight = 150;
            this.MainTreeView.Size = new System.Drawing.Size(284, 527);
            this.MainTreeView.TabIndex = 4;
            this.MainTreeView.DragDrop += new System.Windows.Forms.DragEventHandler(this.MainTreeView_DragDrop);
            this.MainTreeView.DragOver += new System.Windows.Forms.DragEventHandler(this.MainTreeView_DragOver);
            this.MainTreeView.MouseClick += new System.Windows.Forms.MouseEventHandler(this.MainTreeView_MouseClick);
            //
            // nodeIMG
            //
            this.nodeIMG.UseStateImages = true;
            //
            // nodeTextBox
            //
            this.nodeTextBox.ContentAlign = System.Drawing.ContentAlignment.BottomCenter;
            this.nodeTextBox.Sortable = false;
So that is my fault for not being more clear there are actually two issues here.

• What might be causing the behavior where an image can not be loaded into a higher level node?
• What is the best way to implement a different node image for the different states.

Let me also qualify all of this with the fact that I've found that with even using the base NodeWithImage class I can not seem to have the image load and display in the tree view unless the image is assigned when a class instance is created, is this the expected behavior? I also found that if I didn't declare a NodeWithImage (nodeIMG) object which is instantiated via the InitializeComponent() start up method the images will not display in the tree view.

Thanks again.

Visual Studio 2010 - 10.0.30319.1

[Ruslan]

It`s very easy to fix. When you derive your class from the NodeWithImage type, you don`t need to add new Bitmap property (Icon in the BaseNodeEx class). The NodeWithImage already contains the Image property.
Now why your images are not displayed: to display data in a node control, you should fill the DataFieldName node control property (read this for details) with a class member where this data is stored. The NodeImage node control by default fills the DataFieldNameproperty with "Image" value causing to bind this node control to the Image property that`s in the NodeWithImage class. So if you derive your class from the NodeWithImage, you don`t need to fill the DataFieldName (default value is used). But if you want to bind to other property (like you did when added the Icon property) you need to fill the DataFieldName property.
So here`s your node class after fixes:

Code: [Select]

public class BaseNodeEx : NodeWithImage
    {
      private NodeType _type = NodeType.Image;

      public BaseNodeEx()
      {
      }

      public BaseNodeEx(string text)
        : base(text)
      {
      }

      public new Bitmap Image
      {
        get
        {
          Bitmap icon=null;

          switch(Type)
          {
            case NodeType.Batch:
              //icon = ...
              break;

            case NodeType.Document:
              //icon = ...
              break;
           
            case NodeType.Image:
              //icon = ...
              break;
           
            default:
              throw new ArgumentOutOfRangeException();
          }
          return icon;
        }
        set { }
      }

      public NodeType Type
      {
        get { return _type; }
        set { _type = value; }
      }

      public enum NodeType
      {
        Batch,
        Document,
        Image
      }
    }
How to dynamically customize node images

Please see on the Image property override above. There we`ll load and return different images for every node`s state. You can cache the loaded image if you need.