Basic Tutorial > Connecting Shapes

In this step you will learn how to connect shapes with lines.

The visualization is not yet perfect. For example, one would like to see which pages refer to which others. Therefore, you will connect the shapes with arrows now to present this information.

NShape connections are based on active glue points and passive connection points. Each connection consists of a glue point tied to a connection point. The glue point is the active part, because it is the one the user must drag and drop on a connection point to establish the connection. Multiple glue points can be connected to the same connection point but not vice versa.

NShape provides two different kinds of connection points. Regular connection points create precisely located connections as you need for example for flow charts. Here, a connector must be specifically connected for example to a point that represents the ingoing flow of a task. We call this type of connection a point-to-point connection.

Shape connection points represent the whole shape. When a glue point is connected to such a connection point, it is connected to the whole shape. The line to which the glue point belongs is only drawn up to the shape outline and the intersection point moves along the outline when the line moves. This type of connection is called a point-to-shape connection and it is the type of connection you will need in this sample program.

Glue points and connection points are special kinds of control points and can be addressed with an integer id. The exact meaning of the id naturally depends on the shape but in general id 0 is in the center of the shape, 1 is top left, 2 is top center, 3 is top right etc. Some control points have a special meaning and can be addressed by constants. For example, ControlPointId.FirstVertex indicates the start point of a line and ControlPointId.Reference means the reference point of a shape. (The reference point is the one which defines the position of a shape.)

For most shapes, the reference point is a shape connection point, which means that
arrow.ConnectTo(ControlPointId.FirstVirtex, shape, ControlPointId.Reference)
establishes a point to shape connection from the foot of the arrow to the shape. With this knowledge you can easily add the arrows to the diagram.

How to connect shapes with a line:

1.	Add a reference to the assembly Dataweb.NShape.GeneralShapes.dll to the project.

2.	Add the namespace Dataweb.NShape.GeneralShapes.

3.	Add the following code after the two shapes are created:

// Create a line shape for connecting the "referring web page" shape and the "referred web page" shape
Polyline arrow = (Polyline)project1.ShapeTypes["Polyline"].CreateInstance();
// Add shape to the diagram
diagram.Shapes.Add(arrow);
// Connect one of the line shape's endings (first vertex) to the referring shape's reference point
arrow.Connect(ControlPointId.FirstVertex, referringShape, ControlPointId.Reference);
// Connect the other of the line shape's endings (last vertex) to the referred shape
arrow.Connect(ControlPointId.LastVertex, referredShape, ControlPointId.Reference);

4.	Run the application. The shapes are now connected by arrows that point from the referrer to the visited page.

Now the shapes are connected with lines.

Tutorial Navigation

Previous Step - Basic Tutorial - Next Step