Detect click & mousemove on chart background

[MikeWiese]

It would seem intuitive to toggle the trackball (aka "hairline cursor") behavior by clicking or double-clicking on the chart background. But I cannot find any documented way of detecting a mouse click.

In general, is there any way my application can pick up clicks, double-clicks, drags, mousemoves, etc on the background area of the ChartView?

[Giuseppe]

Hello Mike,

You can use the plotAreaDecoration Border element to achieve the desired functionality like this:

XAML

<telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro">

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis LabelFormat="yyyy/MM/dd" LabelFitMode="MultiLine" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>

</telerik:RadCartesianChart>

C#

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using Telerik.Charting;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.ChartView;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        private Random rand = new Random(123456);

        public MainPage()
        {
            InitializeComponent();

            DateTime date = DateTime.Today;
            BarSeries series = new BarSeries();
            LineSeries series2 = new LineSeries();

            for (int i = 0; i < 20; i++)
            {
                series.DataPoints.Add(new CategoricalDataPoint() { Category = date, Value = rand.Next(10, 100) });
                series2.DataPoints.Add(new CategoricalDataPoint() { Category = date, Value = rand.Next(10, 100) });

                date = date.AddDays(1);
            }

            RadChart1.Series.Add(series);
            RadChart1.Series.Add(series2);

            Dispatcher.BeginInvoke(() =>
            {
                var plotAreaDecoration = RadChart1.ChildrenOfType<Border>().Where(b => b.Name == "plotAreaDecoration").SingleOrDefault();

                plotAreaDecoration.Background = new SolidColorBrush(Colors.Transparent);
                plotAreaDecoration.MouseLeftButtonDown += this.plotAreaDecoration_MouseLeftButtonDown;
            });
        }

        private void plotAreaDecoration_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            bool doubleClick = MouseButtonHelper.IsDoubleClick(sender, e);
            if (!doubleClick)
                return;

            if (RadChart1.Behaviors.Count > 0)
                RadChart1.Behaviors.Clear();
            else
                RadChart1.Behaviors.Add(new ChartTrackBallBehavior());
        }
    }

    internal static class MouseButtonHelper
    {
        private const long DoubleClickSpeed = 500;
        private const double MaxMoveDistance = 20;

        private static long lastClickTicks = 0;
        private static Point lastPosition;
        private static object lastSender;

        internal static bool IsDoubleClick(object sender, MouseButtonEventArgs e)
        {
            bool senderMatch = sender.Equals(lastSender);
            lastSender = sender;

            long clickTicks = DateTime.Now.Ticks;
            Point position = e.GetPosition(null);
            if (senderMatch)
            {
                long elapsedTicks = clickTicks - lastClickTicks;
                long elapsedTime = elapsedTicks / TimeSpan.TicksPerMillisecond;
                double distance = position.Distance(lastPosition);
                if (elapsedTime <= DoubleClickSpeed && distance <= MaxMoveDistance)
                {
                    // Double click!
                    lastClickTicks = 0;
                    return true;
                }
            }

            // Not a double click
            lastClickTicks = clickTicks;
            lastPosition = position;

            return false;
        }

        private static double Distance(this Point pointA, Point pointB)
        {
            double x = pointA.X - pointB.X;
            double y = pointA.Y - pointB.Y;

            return Math.Sqrt(x * x + y * y);
        }
    }
}

Hope this helps.


Greetings,
Giuseppe
the Telerik team