Flexible TreeView Flexible TreeView


Support & Community

NodePopupContainer node control

Previous Table of Contents Next

NodePopupContainer allows you to display a popup with any content on mouse click. The popup would be hidden when a user clicks outside of the popup or if the popup loses focus.

Using of the NodePopupContainer node control involves these steps:

  • Measure the node control size inside a node using the MeasureNodeControl treeview event;
  • Draw data using the PaintNodeControl treeview event;
  • Define what to show in the popup using the NodeControlPopupShow treeview event.

You can catch the moment when the popup was shown or hidden using the NodeControlPopupShow and NodeControlPopupHide treeview events respectively.

Example:

NodePopupContainer nc = new NodePopupContainer();
nc.AttachTo(tree);
 
Node node= new Node();
node.AttachTo(tree);
 
tree.MeasureNodeControl += tree_MeasureNodeControl;
tree.PaintNodeControl += tree_PaintNodeControl;
tree.NodeControlPopupShow += tree_NodeControlPopupShow;
 
// measure the node control content size.
private void tree_MeasureNodeControl(FlexibleTreeView pTreeview, MeasureObjectEventArgs pArgs)
{
  // later we`ll draw the 17x17 pixels red rectangle.
  pArgs.Size = new Size(17, 17);
}
 
// draw the node control as a red rectangle.
void tree_PaintNodeControl(FlexibleTreeView pTreeview, NodeControlDrawEventArgs pArgs)
{
  using (SolidBrush br = new SolidBrush(Color.Red))
  {
    pArgs.Context.Graphics.FillRectangle(br, pArgs.Context.Bounds);
  }
}
 
// provide the popup content.
private void tree_NodeControlPopupShow(FlexibleTreeView pTreeview, PopupShowEventArgs pArgs)
{
  // create a control to show in the popup.
  Button btn = new Button();
  btn.Text = "Click me!";
  btn.Click += btn_Click;
 
  pArgs.PopupContent = btn;
  // Optional: update the PopupContent.Size property to set the popup custom size.
  //pArgs.PopupContent.Size = btn.Size; 
}
 
// handle popup content`s events as for any other control.
private void btn_Click(object sender, EventArgs e)
{
  MessageBox.Show("Button clicked");
}


Manual popup and popup as context menu

As well as automatic popup display, you can display it programmatically and customize the popup content and location. To do that, create an invisible NodePopupContainer (Visible = false), subscribe to the MouseDown treeview event, and call the Popup method as shown below:

Here we`ll show the popup with a button inside as a treeview`s context menu.

private NodePopupContainer popupContainer;
 
NodeTextBox tb = new NodeTextBox();
tb.AttachTo(tree);
popupContainer = new NodePopupContainer();
// hide the popup container to show it only on the mouse right click.
popupContainer.Visible = false;
popupContainer.AttachTo(tree);
 
Node node = new Node("Test node");
node.AttachTo(tree);
 
// note that here we didn`t handle the MeasureNodeControl and PaintNodeControl treeview events because we wouldn`t show the node control inside a node.
// handle the mouse down event to show the popup as context menu.
tree.MouseDown += tree_MouseDown;
// handle the NodeControlPopupShow treeview event to provide the popup content.
tree.NodeControlPopupShow += tree_NodeControlPopupShow;
 
void tree_MouseDown(FlexibleTreeView pTreeview, MouseActionArgs pArgs)
{
  if (pArgs.Node != null && pArgs.Button == System.Windows.Forms.MouseButtons.Right)  
  {
    // popup our node control as a treeview`s context menu.
    popupContainer.Popup(pArgs.Node, pArgs.Location);
  }
}
 
// provide the popup content.
private void tree_NodeControlPopupShow(FlexibleTreeView pTreeview, PopupShowEventArgs pArgs)
{
  // create a control to show in the popup.
  Button btn = new Button();
  btn.Text = "Click me!";
  btn.Click += btn_Click;
  pArgs.PopupContent = btn;
 
  // Optional: update the PopupContent.Size property to set the popup custom size.
  //pArgs.PopupContent.Size = btn.Size; 
}
 
private void btn_Click(object sender, EventArgs e)
{
  MessageBox.Show("Button clicked");
}


Additional API reference


Properties

  • ShowBorder – defines whether to show the popup`s border.

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.