How to: Customize Connection Points

• Jan 15, 2021
• 2 minutes to read

To customize connection points of a diagram item, set the item’s DiagramItem.ConnectionPoints property to a collection of connection point locations. Connection point locations are defined in relative coordinates: the (0,0) point corresponds to the top left corner; the (1,1) point to the bottom right corner. The code snippet below illustrates how to set custom connection points for a shape.

C#

shape.ConnectionPoints = new PointCollection(new[] {
    new PointFloat(0, 0),
    new PointFloat(0, .25f),
    new PointFloat(1, .25f),
    new PointFloat(1, 1),
});

VB.NET

shape.ConnectionPoints = New PointCollection( {
    New PointFloat(0, 0),
    New PointFloat(0, .25F),
    New PointFloat(1, .25F),
    New PointFloat(1, 1)
})

The DiagramItem.ConnectionPoints property returns null when the value is not specified, and the DiagramControl uses the item’s default connection points. To obtain the item’s current connection points, use the DiagramItem.ActualConnectionPoints property.

The example below shows how to mark connection point positions.

C#

int pointSize = 8;
    private void DiagramControl1_CustomDrawItem(object sender, CustomDrawItemEventArgs e) {
        DiagramShape shape = e.Item as DiagramShape;
        e.DefaultDraw();
        if (shape != null)
        foreach (DevExpress.Utils.PointFloat point in e.Item.ActualConnectionPoints) {
            e.GraphicsCache.DrawRectangle(Pens.Red, new RectangleF(point.X * e.Size.Width - pointSize / 2, point.Y * e.Size.Height - pointSize / 2, pointSize, pointSize));
        }
        e.Handled = true;
    }

VB.NET

Private pointSize As Integer = 8
    Private Sub DiagramControl1_CustomDrawItem(ByVal sender As Object, ByVal e As CustomDrawItemEventArgs)
        Dim shape As DiagramShape = TryCast(e.Item, DiagramShape)
        e.DefaultDraw()
        If shape IsNot Nothing Then
            For Each point As DevExpress.Utils.PointFloat In e.Item.ActualConnectionPoints
                e.GraphicsCache.DrawRectangle(Pens.Red, new RectangleF(point.X * e.Size.Width - pointSize / 2, point.Y * e.Size.Height - pointSize / 2, pointSize, pointSize));
            Next point
        End If
        e.Handled = True
    End Sub

Additionally, the DiagramControl provides the DiagramControl.QueryConnectionPoints event that allows you to customize connection points’ availability and visibility.