Flexible TreeView Flexible TreeView


Support & Community

NodeControlContainer node control

Previous Table of Contents Next

Flexible TreeView allows you to show any control inside a node using the NodeControlContainer node control.


Control container

Every control that`s displayed in the node control should be wrapped by the ControlContainer class instance, that will control the control`s behavior inside the treeview.

Example:

NodeControlContainer nc = new NodeControlContainer();
nc.AttachTo(tree);
 
// create the control to show inside a node control.
Button b = new Button();
b.Text = "Test";
 
// create the node.
NodeWithControl n = new NodeWithControl();
// create the control wrapper.
n.Container = new ControlContainer(b);
n.AttachTo(tree);

ControlContainer`s main properties:

  • Name – container name. Used to identify the container in the node`s containers list in the NodeContainers node property;
  • Node – node where this container will be displayed;
  • Control – control that will be displayed in the node;
  • SmoothUpdate – defines the control update strategy (see below);
  • Visibility  – defines the attached control visibility;
  • VisibilityManager – control containers visibility manager. Used to control many control containers` visibility from one point.


Many controls in the node

You can display any number of controls inside each node.
To do that, you need:

  1. Inherit a node class from the ARMSoft.FlexibleTreeView.Node class where you can add as many members with the ControlContainer type as many controls inside every node you need;
  2. Add to the treeview one NodeControlContainer node control for every control you defined in the node class before;
  3. For every node, create controls you need to display;
  4. Create a node where your controls will be displayed.

Example:

// 1. Custom node class with an additional control container. We`ll have two controls shown in the node (NodeWithControl class already has the Container property built–in).
public class MyNode : NodeWithControl
{
  private ControlContainer m_ListContainer;
 
  // additional control container for second control to show.
  public ControlContainer ListContainer
  {
    get { return m_ListContainer; }
    set
    {
      m_ListContainer = value;
      // register the container in the node where it will be displayed.
      if(value != null)
      {
        value.Node = this;
      }
    }
  }
}
 
// 2.1. Add the node control to show first control. The NodeControlContainer node control is bound to the built–in Container property by default.
NodeControlContainer nc = new NodeControlContainer();
nc.AttachTo(tree);
 
// 2.2. Add the node control with custom binding for second control.
NodeControlContainer nc2 =new NodeControlContainer();
nc2.DataFieldName = "ListContainer";
nc2.AttachTo(tree);
 
// 3.1. Create the control for first NodeControlContainer node control.
Button b = new Button();
b.Text = "Test";
 
// 3.2. Create the control for second NodeControlContainer node control.
ListBox lb = new ListBox();
lb.Items.AddRange(new string[] { "One", "Two", "Three" });
 
// 4. Create the node where all controls will be shown.
MyNode n = new MyNode();
// attach two controls to this node.
n.Container = new ControlContainer(b);
n.ListContainer = new ControlContainer(lb);
// add this node to the treeview.
n.AttachTo(tree);


Binding to a node

Every ControlContainer has a name in the Name property. Every node has the ControlContainers property with all control containers, displayed within this node, with a container name as a key. You can use the ControlContainers property to access all control containers in run–time. Also, you can use the ControlContainer.GetControlNode static method to get a node where the specified control is shown.

Example:

Here we`ll add the checkbox and the button control using two NodeControlContainer node controls and checkbox will control the button`s Enabled property state.

// custom node class with two control containers (NodeWithControl class already has the Container property built–in).
public class MyNode : NodeWithControl
{
  private ControlContainer m_ButtonContainer;
 
  // declare the node container for second control to display in the node. First container is inherited from the base class.
  public ControlContainer ButtonContainer
  {
    get { return m_ButtonContainer; }
    set
    {
      m_ButtonContainer = value;
      if(value != null)
      {
        value.Node = this;
      }
    }
  }
}
 
// create two node controls to display two controls.
NodeControlContainer nc =new NodeControlContainer();
nc.AttachTo(tree);
NodeControlContainer nc2 =new NodeControlContainer();
// attach the second node control to the new property.
nc2.DataFieldName = "ButtonContainer";
nc2.AttachTo(tree);
 
// create the node where controls will be displayed.
MyNode n = new MyNode();
 
// create first attached control: checkbox.
CheckBox cb = new CheckBox();
cb.Text = "Allow run";
cb.Checked = true;
// work with this control like with any other control.
cb.CheckedChanged += new EventHandler(cb_CheckedChanged);
// attach node container to the destination node.
n.Container = new ControlContainer(cb);
 
// create second attached control: button.
Button b = new Button();
b.Text = "Run";
// attach the control container to the node.
n.ButtonContainer = new ControlContainer(b);
// give a name to the button`s container to access it in run–time later.
n.ButtonContainer.Name = "button";
 
// add this node to the treeview. 
n.AttachTo(tree);
 
// checkbox`s event handler.
void cb_CheckedChanged(object sender, EventArgs e)
{
  Node node;
  ControlContainer buttonContainer;
  Button btn;
  CheckBox cb;
 
  cb = (CheckBox) sender;
  // get a node where this checkbox is displayed.
  node = ControlContainer.GetControlNode<MyNode>(cb);
  // get a control container where the button is hosted using the container name.
  buttonContainer = node.ControlContainers["button"];
  // get the attached button control instance.
  btn = (Button)buttonContainer.Control;
  // change the button`s enabled state according to the checkbox check state.
  btn.Enabled = cb.Checked;
}


Control visibility and visibility manager

ControlContainer allows you to easily control the control`s visibility using the Visiblity and VisibilityManager properties. The main difference between them is that the Visibility is used when you need to control the control`s visibility separately from each other, while the VisibilityManager is used to control the visibility of many controls from one place.


Visibility

The Visibility property is used when you need to control the control`s visibility separately from each other. By default, every attached control is always visible; however, you can define a node state`s combination and show the attached control only for nodes with these states or you can choose whether to show or hide that control for every node in any state separately.

The available visibility settings:

  • Never – never show an object in the node;
  • Always – always show an object in the node;
  • GeneralNode – show an object only for a general node that is not selected, not focused, not soft selected and not under the mouse cursor;
  • SelectedNode – show an object only in selected nodes;
  • FocusedNode – show an object only in a focused node;
  • HotNode - show an object only in a node under the mouse cursor;
  • SoftSelectedNode - show an object only in a soft selected node when the SoftSelection mode (tree.Options.Selection.HoverStyle=eHoverStyle.SoftSelect) is enabled.

Note that these node states may be combined. For example, to show a control only for focused and hot nodes use this code:

// create node controls to show the node title and a button control.
NodeTextBox tb = new NodeTextBox();
tb.AttachTo(tree);
NodeControlContainer nc = new NodeControlContainer();
nc.AttachTo(tree);
 
// create node.
NodeWithControl n = new NodeWithControl("Test node");
Button b = new Button();
b.Text = "Test";
n.Container = new ControlContainer(b);
// show the button control only for focused or hot (under the mouse cursor) nodes.
n.Container.Visibility = eObjectVisibility.FocusedNode | eObjectVisibility.HotNode;
n.AttachTo(tree);
 
// enable the dynamic node height mode to recalculate node height when the button was shown or hidden.
tree.Options.Node.AutoNodeHeight = true;

To hide a control container for a particular node, set the Visibility property to the eObjectVisibility.Never value.


VisibilityManager

The VisibilityManager is used to control the visibility of many controls from one place. To do that, create the ObjectVisibilityManager class instance and set it for all control containers for which you want to control the visibility.
VisibilityManager properties:

  • Enabled – defines whether to use this manager when you get the object`s visibility or to use the Visibility property instead;
  • Visibility – defines the control containers` visibility.

Example:

// create node controls.
NodeTextBox tb = new NodeTextBox();
tb.AttachTo(tree);
NodeControlContainer nc = new NodeControlContainer();
nc.AttachTo(tree);
 
// create the visibility manager.
ObjectVisibilityManager visman = new ObjectVisibilityManager();
// show controls only in a focused or hot node.
visman.Visibility = eObjectVisibility.FocusedNode | eObjectVisibility.HotNode;
 
// add nodes.
NodeWithControl node = new NodeWithControl("Test node 1");
Button b = new Button();
b.Text = "Button 1";
node.Container = new ControlContainer(b);
node.Container.VisibilityManager = visman;
node.AttachTo(tree);
 
node = new NodeWithControl("Test node 2");
b = new Button();
b.Text = "Button 2";
node.Container = new ControlContainer(b);
node.Container.VisibilityManager = visman;
node.AttachTo(tree);
 
// enable the node auto–height to recalculate node height when the button control has shown or hidden.
tree.Options.Node.AutoNodeHeight = true;


ControlContainer.SmoothUpdate

When a custom control changes position, it will be updated by calling the Invalidate method. If the treeview has many visible controls, there may be a delay when redrawing those controls. To force a control to update, enable the SmoothUpdate control container property and the treeview will update controls using the Refresh method, which updates them immediately.

Previous Top Next


Last news
Bookmark and Share
Use Flexible TreeView in WPF project
Sunday, 18 December 2011

Do you have a WPF project and want to use Flexible TreeView there? No problem!

Flexible TreeView v3.4
Friday, 16 December 2011

Flexible TreeView v3.4 maintenance release has been released.

Flexible TreeView v3.3
Friday, 23 September 2011

Flexible TreeView v3.3 maintenance release has been released. Separate assemblies for .NET 2.0, 4.0 and 4.0 Client Profile, HTML markup extension, etc.

Latest release

Version:
Release date:
3.4
Dec 16, 2011


Copyright © 2006-2012 ARMSoft. All rights reserved.