How to: Custom Draw a Crosshair Cursor

• Nov 13, 2018
• 6 minutes to read

This example demonstrates one of several possible way of using the ChartControl.CustomDrawCrosshair event. In this sample, the event is used to modify the legend markers of bar series.

To access crosshair element groups, use the CustomDrawCrosshairEventArgs.CrosshairElementGroups property. Elements are separated into several groups when crosshair labels are displayed for each pane. For each group, it is possible to customize the header using the CrosshairElementGroup.HeaderElement property and elements representing series using the CrosshairElementGroup.CrosshairElements property. F‌or each element representing a series, you can customize its label representation using the CrosshairElementBase.LabelElement property and axis label using the CrosshairElementBase.AxisLabelElement property. For example, to modify the legend marker image, use the CrosshairLabelElement.MarkerImage property.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-draw-a-custom-series-marker-in-the-crosshair-t333191

Form1.cs

using CustomDrawCrosshairSample.Model;
using DevExpress.XtraCharts;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Windows.Forms;

namespace CustomDrawCrosshairSample {
    public partial class Form1 : Form {
        Dictionary<string, Image> photoCache = new Dictionary<string, Image>();

        #region #Constants
        const int borderSize = 2;
        const int scaledPhotoWidth = 32;
        const int scaledPhotoHeight = 34;
        // Width and height of scaled photo with border.
        const int totalWidth = 36;
        const int totalHeight = 38;

        // Rects required to create a custom legend series marker.
        static readonly Rectangle photoRect = new Rectangle(
                borderSize, borderSize,
                scaledPhotoWidth, scaledPhotoHeight);
        static readonly Rectangle totalRect = new Rectangle(
                0, 0,
                totalWidth, totalHeight);
        #endregion

        public Form1() {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e) {
            using (var context = new NwindDbContext()) {
                InitPhotoCache(context.Employees);
                chart.DataSource = context.Orders.ToList();
            }

            chart.SeriesDataMember = "Employee.FullName";
            chart.SeriesTemplate.ArgumentDataMember = "OrderDate";
            chart.SeriesTemplate.ValueDataMembers.AddRange("Freight");

            XYDiagram diagram = chart.Diagram as XYDiagram;
            if (diagram != null) {
                diagram.AxisX.DateTimeScaleOptions.AggregateFunction = AggregateFunction.Sum;
                diagram.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Year;
            }

            chart.CustomDrawCrosshair += OnCustomDrawCrosshair;
        }

        void InitPhotoCache(IEnumerable<Employee> employees) {
            photoCache.Clear();
            foreach (var employee in employees) {
                MemoryStream stream = new MemoryStream(employee.Photo);
                if (!photoCache.ContainsKey(employee.FullName))
                    photoCache.Add(employee.FullName, Image.FromStream(stream));
            }
        }

        #region #CustomDrawCrosshairHandler
        private void OnCustomDrawCrosshair(object sender, CustomDrawCrosshairEventArgs e) {
            foreach (CrosshairElementGroup group in e.CrosshairElementGroups) {
                if (group.CrosshairElements[0] != null)
                    group.HeaderElement.Text = String.Format("Sales in {0:yyyy}", group.CrosshairElements[0].SeriesPoint.DateTimeArgument);
                foreach (CrosshairElement element in group.CrosshairElements) {
                    Bitmap image = new Bitmap(totalWidth, totalHeight);
                    using (Graphics graphics = Graphics.FromImage(image)) {
                        graphics.FillRectangle(new SolidBrush(element.LabelElement.MarkerColor), totalRect);
                        Image photo;
                        if (photoCache.TryGetValue(element.Series.Name, out photo))
                            graphics.DrawImage(photo, photoRect);
                    }
                    element.LabelElement.MarkerImage = image;
                    element.LabelElement.MarkerSize = new Size(totalWidth, totalHeight);
                }
            }
        }
        #endregion 
    }
}

Employee.cs

namespace CustomDrawCrosshairSample.Model
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;

    public partial class Employee
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Employee()
        {
            Orders = new HashSet<Order>();
        }

        [Key]
        [Column("EmployeeId")]
        public int EmployeeId { get; set; }

        [Required]
        [StringLength(20)]
        public string LastName { get; set; }

        [Required]
        [StringLength(10)]
        public string FirstName { get; set; }

        [Column(TypeName = "image")]
        public byte[] Photo { get; set; }


        public string FullName { get { return String.Format("{0} {1}", FirstName, LastName); } }
        public virtual ICollection<Order> Orders { get; set; }
    }
}

NwindDbContext.cs

namespace CustomDrawCrosshairSample.Model {
    using System;
    using System.Data.Entity;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Linq;

    public partial class NwindDbContext : DbContext {
        public NwindDbContext()
            : base("name=NwindDbContext") {
        }

        public virtual DbSet<Employee> Employees { get; set; }
        public virtual DbSet<Order> Orders { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder) {

        }
    }
}

Order.cs

namespace CustomDrawCrosshairSample.Model
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;

    public partial class Order
    {
        public int OrderID { get; set; }

        [Column("EmployeeId")]
        public int? EmployeeId { get; set; }

        [Column(TypeName = "datetime")]
        public DateTime OrderDate { get; set; }

        public decimal? Freight { get; set; }

        [ForeignKey("EmployeeId")]
        public virtual Employee Employee { get; set; }
    }
}

NwindDbContext.vb

Imports System.Linq
Imports System.ComponentModel.DataAnnotations.Schema
Imports System.Data.Entity
Imports System

Namespace CustomDrawCrosshairSample.Model

    Partial Public Class NwindDbContext
        Inherits DbContext

        Public Sub New()
            MyBase.New("name=NwindDbContext")
        End Sub

        Public Overridable Property Employees() As DbSet(Of Employee)
        Public Overridable Property Orders() As DbSet(Of Order)

        Protected Overrides Sub OnModelCreating(ByVal modelBuilder As DbModelBuilder)

        End Sub
    End Class
End Namespace

Form1.vb

Imports CustomDrawCrosshairSample.Model
Imports DevExpress.XtraCharts
Imports System
Imports System.Collections.Generic
Imports System.Drawing
Imports System.IO
Imports System.Linq
Imports System.Windows.Forms

Namespace CustomDrawCrosshairSample
    Partial Public Class Form1
        Inherits Form

        Private photoCache As New Dictionary(Of String, Image)()

        #Region "#Constants"
        Private Const borderSize As Integer = 2
        Private Const scaledPhotoWidth As Integer = 32
        Private Const scaledPhotoHeight As Integer = 34
        ' Width and height of scaled photo with border.
        Private Const totalWidth As Integer = 36
        Private Const totalHeight As Integer = 38

        ' Rects required to create a custom legend series marker.
        Private Shared ReadOnly photoRect As New Rectangle(borderSize, borderSize, scaledPhotoWidth, scaledPhotoHeight)
        Private Shared ReadOnly totalRect As New Rectangle(0, 0, totalWidth, totalHeight)
        #End Region

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
            Using context = New NwindDbContext()
                InitPhotoCache(context.Employees)
                chart.DataSource = context.Orders.ToList()
            End Using

            chart.SeriesDataMember = "Employee.FullName"
            chart.SeriesTemplate.ArgumentDataMember = "OrderDate"
            chart.SeriesTemplate.ValueDataMembers.AddRange("Freight")

            Dim diagram As XYDiagram = TryCast(chart.Diagram, XYDiagram)
            If diagram IsNot Nothing Then
                diagram.AxisX.DateTimeScaleOptions.AggregateFunction = AggregateFunction.Sum
                diagram.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Year
            End If

            AddHandler chart.CustomDrawCrosshair, AddressOf OnCustomDrawCrosshair
        End Sub

        Private Sub InitPhotoCache(ByVal employees As IEnumerable(Of Employee))
            photoCache.Clear()
            For Each employee In employees
                Dim stream As New MemoryStream(employee.Photo)
                If Not photoCache.ContainsKey(employee.FullName) Then
                    photoCache.Add(employee.FullName, Image.FromStream(stream))
                End If
            Next employee
        End Sub

        #Region "#CustomDrawCrosshairHandler"
        Private Sub OnCustomDrawCrosshair(ByVal sender As Object, ByVal e As CustomDrawCrosshairEventArgs)
            For Each group As CrosshairElementGroup In e.CrosshairElementGroups
                If group.CrosshairElements(0) IsNot Nothing Then
                    group.HeaderElement.Text = String.Format("Sales in {0:yyyy}", group.CrosshairElements(0).SeriesPoint.DateTimeArgument)
                End If
                For Each element As CrosshairElement In group.CrosshairElements
                    Dim image As New Bitmap(totalWidth, totalHeight)
                    Using graphics As Graphics = System.Drawing.Graphics.FromImage(image)
                        graphics.FillRectangle(New SolidBrush(element.LabelElement.MarkerColor), totalRect)
                        Dim photo As Image = Nothing
                        If photoCache.TryGetValue(element.Series.Name, photo) Then
                            graphics.DrawImage(photo, photoRect)
                        End If
                    End Using
                    element.LabelElement.MarkerImage = image
                    element.LabelElement.MarkerSize = New Size(totalWidth, totalHeight)
                Next element
            Next group
        End Sub
        #End Region 
    End Class
End Namespace

Order.vb

Imports System.Data.Entity.Spatial
Imports System.ComponentModel.DataAnnotations.Schema
Imports System.ComponentModel.DataAnnotations
Imports System.Collections.Generic
Imports System

Namespace CustomDrawCrosshairSample.Model

    Partial Public Class Order
        Public Property OrderID() As Integer

        <Column("EmployeeId")> _
        Public Property EmployeeId() As Integer?

        <Column(TypeName := "datetime")> _
        Public Property OrderDate() As Date

        Public Property Freight() As Decimal?

        <ForeignKey("EmployeeId")> _
        Public Overridable Property Employee() As Employee
    End Class
End Namespace

Employee.vb

Imports System.Data.Entity.Spatial
Imports System.ComponentModel.DataAnnotations.Schema
Imports System.ComponentModel.DataAnnotations
Imports System.Collections.Generic
Imports System

Namespace CustomDrawCrosshairSample.Model

    Partial Public Class Employee
        <System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")> _
        Public Sub New()
            Orders = New HashSet(Of Order)()
        End Sub

        <Key, Column("EmployeeId")> _
        Public Property EmployeeId() As Integer

        <Required, StringLength(20)> _
        Public Property LastName() As String

        <Required, StringLength(10)> _
        Public Property FirstName() As String

        <Column(TypeName := "image")> _
        Public Property Photo() As Byte()


        Public ReadOnly Property FullName() As String
            Get
                Return String.Format("{0} {1}", FirstName, LastName)
            End Get
        End Property
        Public Overridable Property Orders() As ICollection(Of Order)
    End Class
End Namespace