Extended TreeView Tutorials

Creating Custom Nodes

Sometimes you need to show different content in the tree nodes. For creating custom nodes, Extended TreeView component has a base class represented by a NodeBase class. Every node is a small table. Each cell in this table connects with node object. Node objects can be predefined classes, such as TextNodeObject or CheckBoxNodeObject, or can be inherited from NodeObjectBase class.

Custom Node without CheckBox

In the class constructor we prepare table layout of the node content Current table consist of one column and one row. In other words this simple class has only one cell in which we define text object

using System;
using System.Text;
using AltaVim.WinForms;
using AltaVim.WinForms.NodeObjects;
using System.Drawing;

namespace Sample
{
    public class RootTreeNode : NodeBase
    {
        private TextNodeObject textobject;

        public string Text
        {
            get { return textobject.Text; }
            set { textobject.Text = (value == null) ? string.Empty : value; }
        }

        public Font TextFont
        {
            get { return textobject.NodeFont; }
            set { textobject.NodeFont = value; }
        }
        
        public RootTreeNode()
        {

            // first of all we create text object and set the font which we like
            textobject = new TextNodeObject(this);
            textobject.NodeFont = new Font("Verdana", 8.5f);

            NormalTable.ColumnCount = 1;
            NormalTable.RowCount = 1;

            // add column style to the table layout
            NormalTable.ColumnStyles.Add(new AltaVim.WinForms.ColumnStyle());

            // define default cell properties, which will be copied for real cells
            NormalTable.DefaultCell.Padding = 2;
            NormalTable.DefaultCell.HorizontalAlignment = HorizontalAlignment.Left;
            NormalTable.DefaultCell.VerticalAlignment = VerticalAlignment.Middle;

            // assign object with a cell in position at row 0 and column 0
            NormalTable.Objects.Add(textobject,0,0);
            NormalTable.SetPadding(textobject,4,4,4,2);


            // We can create another table layout for the case when node is selected.
            // But for this simple class we just assign selected table to the normal table.
            SelectedTable = NormalTable;
        }
    }
}
 

Node with image cell and two text cells

Let's create custom node for displaying three objects: image, main text and comment text. Comment text will be displayed only when node is selected. In order to display image in the node we have to create ImageNodeObject described in the chapter How to create Image node object. Then we create class for our custom node. In the class constructor we create node objects and assign them to the cells.

    public class MyTreeNode: NodeBase
    {
       
        private TextNodeObject comment_text_object;
        private TextNodeObject textobject;
        private ImageNodeObject imageobject;



        [Category("Appearance")]
        public Image Image
        {
            get { return imageobject.Image; }
            set { imageobject.Image = value; }
        }

        [Category("Appearance")]
        public string Text
        {
            get { return textobject.Text; }
            set { textobject.Text = (value == null) ? string.Empty : value; }
        }

        [Category("Appearance")]
        public Font TextFont
        {
            get
            {
                return textobject.NodeFont;
            }
            set
            {
                textobject.NodeFont = value;
            }
        }

        [Category("Appearance")]
        public string BottomText
        {
            get { return comment_text_object.Text; }
            set { comment_text_object.Text = (value == null) ? string.Empty : value; }
        }

        [Category("Appearance")]
        public Font BottomTextFont
        {
            get
            {
                return comment_text_object.NodeFont;
            }
            set
            {
                comment_text_object.NodeFont = value;
            }
        }

        
        public MyTreeNode()
        {
            // First of all we create node objects. For main and comment texts we define 
            // different fonts.
            comment_text_object = new TextNodeObject(this);
            comment_text_object.NodeFont = new Font("Verdana", 8, FontStyle.Italic);
            comment_text_object.ForeColor = Color.DarkBlue;
            textobject = new TextNodeObject(this);
            textobject.NodeFont = new Font("Verdana", 8.5f);
            imageobject = new ImageNodeObject();

            // Then we make normal and selected tables for node.
            // Normal table has two columns, left column for image and 
            // right column for main text.
            
            // Preparing default cell.
            NormalTable.DefaultCell.Padding = 2;
            // Horizontal aligment of the object in the cell
            NormalTable.DefaultCell.HorizontalAlignment = HorizontalAlignment.Left;
            // Vertical aligment of the object in the cell
            NormalTable.DefaultCell.VerticalAlignment = VerticalAlignment.Middle;
            
            NormalTable.ColumnCount = 2;
            NormalTable.RowCount = 1;
            NormalTable.ColumnStyles.Add(new ColumnStyle(SizeTypes.Absolute,0));
            NormalTable.ColumnStyles.Add(new ColumnStyle());


            //add image object to the first cell
            NormalTable.Objects.Add(imageobject, 0, 0);
            //change padding settings for image object
            NormalTable.SetPedding(imageobject, 4);
            //add text object to the second cell 
            NormalTable.Objects.Add(textobject, 1, 0);
            NormalTable.SetPedding(imageobject, 4, 4, 4, 2);

            // Selected node will have also two columns. But first column
            // is stretched on two rows. And image is aligned to the middle
            // of the total column height.
            
            SelectedTable.DefaultCell.Padding = 2;
            SelectedTable.DefaultCell.HorizontalAlignment = HorizontalAlignment.Left;
            SelectedTable.DefaultCell.VerticalAlignment = VerticalAlignment.Middle;

            SelectedTable.ColumnCount = 2;
            SelectedTable.RowCount = 2;
            SelectedTable.ColumnStyles.Add(new ColumnStyle(SizeTypes.Absolute, 0));
            SelectedTable.ColumnStyles.Add(new ColumnStyle());

            SelectedTable.Objects.Add(imageobject, 0, 0);
            SelectedTable.SetRowSpan(imageobject, 2);
            SelectedTable.SetPedding(imageobject, 4);
            
            SelectedTable.Objects.Add(textobject, 1, 0);
            SelectedTable.SetPedding(textobject, 4, 4, 4, 2);
             
            SelectedTable.Objects.Add(comment_text_object, 1, 1);
            SelectedTable.SetPedding(comment_text_object, 4, 4, 4, 2);

        }

    }