Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Customizing the Appearance of Items

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

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

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.

See Also