How to: Use the CustomDrawItem Event to Draw Custom Icons Inside Diagram Items

• Nov 13, 2018
• 4 minutes to read

This example demonstrates how to use the DiagramControl.CustomDrawItem event to modify the standard drawing mechanism of diagram items (shapes, connectors, containers, etc.). In this example, a DiagramShape class descendant was created to introduce the Status property. Depending on the Status property value, a custom icon is drawn in the lower right-hand corner of a shape.

Note

The CustomDrawItemEventArgs.DefaultDraw method in the event args invokes certain parts of the standard shape drawing mechanism (the method parameter defines which ones). If you don’t call this method, shape content, border and background will not be drawn.

To apply custom drawing logic defined in the DiagramControl.CustomDrawItem event handler to your shapes, set the Handled property from the event args to true.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-the-customdrawitem-event-to-draw-custom-icons-inside-diagram-items-t441104

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace XtraDiagram.CustomDraw {
    static class Program {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main() {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
}

Form1.cs

using DevExpress.Diagram.Core;
using DevExpress.Utils.Serializing;
using DevExpress.XtraDiagram;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace XtraDiagram.CustomDraw {
    public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm {
        public Form1() {
            InitializeComponent();
            RegisterShapes();
            diagramControl1.CreateRibbon();
            diagramControl1.CreateDocking();
        }

        public void RegisterShapes() {
            DiagramControl.ItemTypeRegistrator.Register(typeof(DiagramShapeEx));
            var stencil = new DiagramStencil("customShapes", "Custom Shapes");
            stencil.RegisterTool(new FactoryItemTool("activeTaskShape", () => "Active Task", diagram => new DiagramShapeEx { Content = "Active Task", Status = Status.Active }, new System.Windows.Size(150, 100), false));
            stencil.RegisterTool(new FactoryItemTool("inactiveTaskShape", () => "Inactive Task", diagram => new DiagramShapeEx { Content = "Inactive Task", Status = Status.Inactive }, new System.Windows.Size(150, 100), false));
            DiagramToolboxRegistrator.RegisterStencil(stencil);
            diagramControl1.OptionsBehavior.SelectedStencils = StencilCollection.Parse("customShapes");
        }

        private void diagramControl1_CustomGetEditableItemProperties(object sender, DiagramCustomGetEditableItemPropertiesEventArgs e) {
            e.Properties.Add(TypeDescriptor.GetProperties(typeof(DiagramShapeEx))["Status"]);
        }

        private void diagramControl1_CustomDrawItem(object sender, CustomDrawItemEventArgs e) {
            var shape = e.Item as DiagramShapeEx;
            if (shape == null)
                return;
            e.DefaultDraw();
            var imagePath = shape.Status == Status.Active ? "images/actions/apply_16x16.png" : "images/actions/cancel_16x16.png";
            var image = DevExpress.Images.ImageResourceCache.Default.GetImage(imagePath);
            var margin = 3f;
            e.Graphics.DrawImage(image, new RectangleF(shape.Width - image.Width - margin, shape.Height - image.Height - margin, image.Width, image.Height));
            e.Handled = true;
        }
    }

    public class DiagramShapeEx : DiagramShape {

        [XtraSerializableProperty, Category("Info")]
        public Status Status { get; set; }
    }

    public enum Status { Active, Inactive }
}

Form1.vb

Imports DevExpress.Diagram.Core
Imports DevExpress.Utils.Serializing
Imports DevExpress.XtraDiagram
Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows.Forms

Namespace XtraDiagram.CustomDraw
    Partial Public Class Form1
        Inherits DevExpress.XtraBars.Ribbon.RibbonForm

        Public Sub New()
            InitializeComponent()
            RegisterShapes()
            diagramControl1.CreateRibbon()
            diagramControl1.CreateDocking()
        End Sub

        Public Sub RegisterShapes()
            DiagramControl.ItemTypeRegistrator.Register(GetType(DiagramShapeEx))
            Dim stencil = New DiagramStencil("customShapes", "Custom Shapes")
            stencil.RegisterTool(New FactoryItemTool("activeTaskShape", Function() "Active Task", Function(diagram) New DiagramShapeEx With {.Content = "Active Task", .Status = Status.Active}, New System.Windows.Size(150, 100), False))
            stencil.RegisterTool(New FactoryItemTool("inactiveTaskShape", Function() "Inactive Task", Function(diagram) New DiagramShapeEx With {.Content = "Inactive Task", .Status = Status.Inactive}, New System.Windows.Size(150, 100), False))
            DiagramToolboxRegistrator.RegisterStencil(stencil)
            diagramControl1.OptionsBehavior.SelectedStencils = StencilCollection.Parse("customShapes")
        End Sub

        Private Sub diagramControl1_CustomGetEditableItemProperties(ByVal sender As Object, ByVal e As DiagramCustomGetEditableItemPropertiesEventArgs) Handles diagramControl1.CustomGetEditableItemProperties
            e.Properties.Add(TypeDescriptor.GetProperties(GetType(DiagramShapeEx))("Status"))
        End Sub

        Private Sub diagramControl1_CustomDrawItem(ByVal sender As Object, ByVal e As CustomDrawItemEventArgs) Handles diagramControl1.CustomDrawItem
            Dim shape = TryCast(e.Item, DiagramShapeEx)
            If shape Is Nothing Then
                Return
            End If
            e.DefaultDraw()
            Dim imagePath = If(shape.Status = Status.Active, "images/actions/apply_16x16.png", "images/actions/cancel_16x16.png")
            Dim image = DevExpress.Images.ImageResourceCache.Default.GetImage(imagePath)
            Dim margin = 3F
            e.Graphics.DrawImage(image, New RectangleF(shape.Width - image.Width - margin, shape.Height - image.Height - margin, image.Width, image.Height))
            e.Handled = True
        End Sub
    End Class

    Public Class DiagramShapeEx
        Inherits DiagramShape

        <XtraSerializableProperty, Category("Info")> _
        Public Property Status() As Status
    End Class

    Public Enum Status
        Active
        Inactive
    End Enum
End Namespace

Program.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows.Forms

Namespace XtraDiagram.CustomDraw
    Friend NotInheritable Class Program

        Private Sub New()
        End Sub

        ''' <summary>
        ''' The main entry point for the application.
        ''' </summary>
        <STAThread> _
        Shared Sub Main()
            Application.EnableVisualStyles()
            Application.SetCompatibleTextRenderingDefault(False)
            Application.Run(New Form1())
        End Sub
    End Class
End Namespace