Aspose.Slides FOSS
.NET
How to Connect Shapes with Connectors in .NET

How to Connect Shapes with Connectors in .NET

This guide shows how to connect shapes with connectors in PowerPoint slides using Aspose.Slides FOSS for .NET. Call slide.Shapes.AddConnector() to create a connector, then set conn.StartShapeConnectedTo and conn.EndShapeConnectedTo to link two shapes. The most common connector type is BentConnector3, which routes around obstacles with a single elbow bend.

Prerequisites

Add the following package reference to your project by running the dotnet CLI install command:

dotnet add package Aspose.Slides.Foss

Connection Site Indexes

Every shape has four numbered connection sites:

IndexPosition
0Top center
1Left center
2Bottom center
3Right center

Connect Two Shapes

Create the two shapes, add a connector with slide.Shapes.AddConnector(), then set StartShapeConnectedTo and EndShapeConnectedTo to link them at the desired connection sites:

using Aspose.Slides.Foss;
using Aspose.Slides.Foss.Export;

using var prs = new Presentation();
var slide = prs.Slides[0];

// Add two rectangles
var box1 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 50, 200, 200, 100);
var box2 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 450, 200, 200, 100);

box1.AddTextFrame("Start");
box2.AddTextFrame("End");

// Add a bent connector (initial bounds are overwritten by the connection)
var conn = slide.Shapes.AddConnector(ShapeType.BentConnector3, 0, 0, 10, 10);

// Connect right side of box1 (site 3) to left side of box2 (site 1)
conn.StartShapeConnectedTo = box1;
conn.StartShapeConnectionSiteIndex = 3;
conn.EndShapeConnectedTo = box2;
conn.EndShapeConnectionSiteIndex = 1;

prs.Save("connected.pptx", SaveFormat.Pptx);

The placeholder bounds (0, 0, 10, 10) passed to AddConnector are ignored once the connection endpoints are set; PowerPoint re-routes the connector to the attached shapes.

Connector Types

Use ShapeType constants to select the connector routing style. Common options include straight lines, single-elbow, and double-elbow connectors:

// Straight line
ShapeType.StraightConnector1

// Single elbow (L-shape)
ShapeType.BentConnector2

// Double elbow (Z-shape): most common
ShapeType.BentConnector3

// Curved connector
ShapeType.CurvedConnector3

Style the Connector Line

Set the connector’s line color, width, and dash style via conn.LineFormat after creating the connector:

using Aspose.Slides.Foss;
using Aspose.Slides.Foss.Drawing;
using Aspose.Slides.Foss.Export;

using var prs = new Presentation();
var slide = prs.Slides[0];

var box1 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 50, 150, 180, 80);
var box2 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 500, 300, 180, 80);

var conn = slide.Shapes.AddConnector(ShapeType.BentConnector3, 0, 0, 10, 10);
conn.StartShapeConnectedTo = box1;
conn.StartShapeConnectionSiteIndex = 2;   // bottom of box1
conn.EndShapeConnectedTo = box2;
conn.EndShapeConnectionSiteIndex = 0;     // top of box2

// Style: dashed blue line, 2 pt width
var lf = conn.LineFormat;
lf.Width = 2.0;
lf.FillFormat.SolidFillColor.Color = Color.Blue;
lf.DashStyle = LineDashStyle.Dash;

prs.Save("styled-connector.pptx", SaveFormat.Pptx);

Flowchart with Multiple Connectors

Build a multi-step flowchart by creating several shapes and adding a BentConnector3 connector between each consecutive pair:

using Aspose.Slides.Foss;
using Aspose.Slides.Foss.Export;

using var prs = new Presentation();
var slide = prs.Slides[0];

// Three-step flowchart
var step1 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 350, 50, 200, 70);
var step2 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 350, 220, 200, 70);
var step3 = slide.Shapes.AddAutoShape(ShapeType.Rectangle, 350, 390, 200, 70);

step1.AddTextFrame("Step 1");
step2.AddTextFrame("Step 2");
step3.AddTextFrame("Step 3");

// Connect step1 -> step2
var conn1 = slide.Shapes.AddConnector(ShapeType.BentConnector3, 0, 0, 10, 10);
conn1.StartShapeConnectedTo = step1;
conn1.StartShapeConnectionSiteIndex = 2;   // bottom
conn1.EndShapeConnectedTo = step2;
conn1.EndShapeConnectionSiteIndex = 0;     // top

// Connect step2 -> step3
var conn2 = slide.Shapes.AddConnector(ShapeType.BentConnector3, 0, 0, 10, 10);
conn2.StartShapeConnectedTo = step2;
conn2.StartShapeConnectionSiteIndex = 2;
conn2.EndShapeConnectedTo = step3;
conn2.EndShapeConnectionSiteIndex = 0;

prs.Save("flowchart.pptx", SaveFormat.Pptx);

Read Connector Properties

Load an existing presentation and inspect each connector’s StartShapeConnectedTo and EndShapeConnectedTo by casting shapes to Connector:

using Aspose.Slides.Foss;

using var prs = new Presentation("connected.pptx");
foreach (var shape in prs.Slides[0].Shapes)
{
    if (shape is Connector connector)
    {
        var start = connector.StartShapeConnectedTo;
        var end = connector.EndShapeConnectedTo;
        Console.WriteLine($"Connector: {start?.Name ?? "?"} -> {end?.Name ?? "?"}");
    }
}

See Also

 English