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.Graphics.DrawEllipse(new System.Drawing.Pen(System.Drawing.Brushes.Red), 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