NodePopupContainer

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 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 NodeControlPopupShown treeview event.

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

Example

C#Visual Basic

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 treeview, MeasureObjectEventArgs args)
{
    // Later we'll draw the 17x17 pixels red rectangle.
    args.Size = new Size(17, 17);
}

// Draw the node control as a red rectangle.
void tree_PaintNodeControl(FlexibleTreeView treeview, NodeControlDrawEventArgs args)
{
    using (SolidBrush br = new SolidBrush(Color.Red))
    {
        args.Context.Graphics.FillRectangle(br, args.Context.Bounds);
    }
}

// Provide the popup content.
private void tree_NodeControlPopupShow(FlexibleTreeView treeview, PopupShowEventArgs args)
{
    // Create a control to show in the popup.
    Button btn = new Button();
    btn.Text = "Click me!";
    btn.Click += btn_Click;

    args.PopupContent = btn;
    // Optional: update the PopupContent.Size property to set the popup custom size.
    //args.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");
}

Dim nc As New NodePopupContainer()
nc.AttachTo(tree)

Dim node As New Node()
node.AttachTo(tree)

AddHandler tree.MeasureNodeControl, AddressOf tree_MeasureNodeControl
AddHandler tree.PaintNodeControl, AddressOf tree_PaintNodeControl
AddHandler tree.NodeControlPopupShow, AddressOf tree_NodeControlPopupShow

' Measure the node control content size.
Private Sub tree_MeasureNodeControl(treeview As FlexibleTreeView, args As MeasureObjectEventArgs)
    ' Later we'll draw the 17x17 pixels red rectangle.
    args.Size = New Size(17, 17)
End Sub

' Draw the node control as a red rectangle.
Private Sub tree_PaintNodeControl(treeview As FlexibleTreeView, args As NodeControlDrawEventArgs)
    Using br As New SolidBrush(Color.Red)
        args.Context.Graphics.FillRectangle(br, args.Context.Bounds)
    End Using
End Sub

' Provide the popup content.
Private Sub tree_NodeControlPopupShow(treeview As FlexibleTreeView, args As PopupShowEventArgs)
    ' Create a control to show in the popup.
    Dim btn As New Button()
    btn.Text = "Click me!"
    AddHandler btn.Click, AddressOf btn_Click

    args.PopupContent = btn
    ' Optional: update the PopupContent.Size property to set the popup custom size.
    'args.PopupContent.Size = btn.Size
End Sub

' Handle popup content's events as for any other control.
Private Sub btn_Click(sender As Object, e As EventArgs)
    MessageBox.Show("Button clicked")
End Sub

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

Below, we'll show the popup with a button inside as a treeview's context menu:

C#Visual Basic

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 treeview, MouseActionArgs args)
{
    if (args.Node != null && args.Button == System.Windows.Forms.MouseButtons.Right) 
    {
        // Popup our node control as a treeview's context menu.
        popupContainer.Popup(args.Node, args.Location);
    }
}

// Provide the popup content.
private void tree_NodeControlPopupShow(FlexibleTreeView treeview, PopupShowEventArgs args)
{
    // Create a control to show in the popup.
    Button btn = new Button();
    btn.Text = "Click me!";
    btn.Click += btn_Click;
    args.PopupContent = btn;

    // Optional: update the PopupContent.Size property to set the popup custom size.
    //args.PopupContent.Size = btn.Size;
}

private void btn_Click(object sender, EventArgs e)
{
    MessageBox.Show("Button clicked");
}

Private popupContainer As NodePopupContainer

Dim tb As 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)

Dim node As 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.
AddHandler tree.MouseDown, AddressOf tree_MouseDown
' Handle the NodeControlPopupShow treeview event to provide the popup content.
AddHandler tree.NodeControlPopupShow, AddressOf tree_NodeControlPopupShow

Private Sub tree_MouseDown(treeview As FlexibleTreeView, args As MouseActionArgs)
    If args.Node IsNot Nothing AndAlso args.Button = System.Windows.Forms.MouseButtons.Right Then
        ' Popup our node control as a treeview's context menu.
        popupContainer.Popup(args.Node, args.Location)
    End If
End Sub

' Provide the popup content.
Private Sub tree_NodeControlPopupShow(treeview As FlexibleTreeView, args As PopupShowEventArgs)
    ' Create a control to show in the popup.
    Dim btn As New Button()
    btn.Text = "Click me!"
    AddHandler btn.Click, AddressOf btn_Click
    args.PopupContent = btn

    ' Optional: update the PopupContent.Size property to set the popup custom size.
    'args.PopupContent.Size = btn.Size
End Sub

Private Sub btn_Click(sender As Object, e As EventArgs)
    MessageBox.Show("Button clicked")
End Sub

Additional API reference#

Properties#

ShowBorder - defines whether to show the popup's border.

NodePopupContainer

Manual popup and popup as a context menu#

Additional API reference#

Properties#