How to: Customize Connection Points

  • 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.

shape.ConnectionPoints = new PointCollection(new[] {
    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.

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;
    }

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