Tutorial 1: Setting a composite node

This tutorial demonstrates how to use MindFusion.Diagramming components.

1. Creating a composite node

To create a composite node simply instantiate from the CompositeNode class. Currently the diagram does not provide a factory method for composite node creation. Therefore you need to manually add the newly created composite node to the list of diagram nodes. The sample below references the diagram1 variable, which identifies the Diagram object.

C#

CompositeNode node = new CompositeNode(diagram1);
node.Bounds = new RectangleF(10, 10, 60, 10);
diagram1.Nodes.Add(node);

Visual Basic

Dim node As new CompositeNode(diagram1)
node.Bounds = New RectangleF(10, 10, 60, 10)
diagram1.Nodes.Add(node)

2. Creating the components

Now that the node is created and added to the diagram we can create its contents. For the purposes of this tutorial we will create a horizontal StackPanel containing a TextComponent, an EditComponent and a ButtonComponent.

C#

StackPanel panel = new StackPanel();
panel.Orientation = MindFusion.Diagramming.Components.Orientation.Horizontal;
panel.Spacing = 1;

TextComponent text = new TextComponent();
text.Text = "Enter name:";
panel.Components.Add(text);

EditComponent edit = new EditComponent();
edit.Width = 25;
edit.AcceptsReturn = false;
panel.Components.Add(edit);

ButtonComponent button = new ButtonComponent();
TextComponent buttonContent = new TextComponent();
buttonContent.Text = "Enter";
button.Content = buttonContent;
panel.Components.Add(button);

Visual Basic

Dim panel As New StackPanel()
panel.Orientation = MindFusion.Diagramming.Components.Orientation.Horizontal
panel.Spacing = 1

Dim text As New TextComponent()
text.Text = "Enter name:"
panel.Components.Add(text)

Dim edit As New EditComponent()
edit.Width = 25
edit.AcceptsReturn = False
panel.Components.Add(edit)

Dim button As New ButtonComponent()
Dim buttonContent As New TextComponent()
buttonContent.Text = "Enter"
button.Content = buttonContent
panel.Components.Add(button)

Now add the newly created components to the previously created composite node:

C#

node.Components.Add(panel);

Visual Basic

node.Components.Add(panel)

Running the tutorial at this point should display a simple composite node the three components arranged horizontally.

To set the focus on the edit initially, simply set its IsFocused property to true. Note that in order to have effect this property has to be set after the component is added to the CompositeNode. Disconnected components cannot receive input focus.