Customizing the Appearance of Items

• Jan 15, 2021
• 2 minutes to read

The DiagramControl.CustomDrawItem event allows you to customize the appearance of diagram items or implement a custom painting from scratch.

The CustomDrawItemEventArgs.DefaultDraw method allows you to define which elements of the default painting should be painted. Set the Handled parameter to true to completely disable default painting.

The code snippet below illustrates how to display red circles around connection points.

C#

int pointSize = 8;
        private void DiagramControl1_CustomDrawItem(object sender, CustomDrawItemEventArgs e) {
            DiagramShape shape = e.Item as DiagramShape;
            e.DefaultDraw();
            if (shape != null) {
                PointCollection points = shape.ActualConnectionPoints;
                foreach (DevExpress.Utils.PointFloat point in points) {
                    e.GraphicsCache.DrawEllipse(Pens.Red, new RectangleF(point.X * shape.Width - pointSize / 2, point.Y * shape.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
            Dim points As PointCollection = shape.ActualConnectionPoints
            For Each point As DevExpress.Utils.PointFloat In points
                e.GraphicsCache.DrawEllipse(Pen.Red, New RectangleF(point.X * shape.Width - pointSize \ 2, point.Y * shape.Height - pointSize \ 2, pointSize, pointSize))
            Next point
            e.Handled = True
        End If
    End Sub

To add interactive elements to a diagram item, define a custom shape as described in the Creating Shapes and Containers Using Shape Templates lesson. Alternatively, use the DiagramContainer element to combine multiple shapes and specify their protection properties to define which operations are allowed.

To customize the position of connection points, use the DiagramItem.ConnectionPoints property.