How can I drag the "crosshair" series?

[Auvo]

Hi,

I have added a crosshair(which is actually a line serie) to RadChart and currently I have functionality that crosshair follows the mouse cursor when I move cursor over the chart area, that seems to work ok.

But now I need to change that functionality. Instead of following the mouse cursor I need to "drag" the crosshair and then move it to another location on the chart.

Any idea how can I do that?

I have trying to add onDrag event to crosshair series but for some reason I cannot do that?!

[Yavor]

Hello Auvo,

I think you can keep the logic for moving the crosshair currently and add only 2 event handlers - 1 for MouseLeftButtonDown and 1 for MouseLeftButtonUp. You can raise a flag on mouse down that will allow the logic on MouseMove to work like before.

If this approach doesn't work for you will it be possible for your to share more implementation details regarding this crosshair. A sample project can help us a lot in understanding you scenario.

All the best,
Yavor
the Telerik team

[Auvo]

Hello,

First I tried to add both MouseLeftButtonDown and - up event to crosshairline but it not catch these events (it not doing anything), I don't no why?

If I add those events to the chart area then I catch the events BUT in this solution when I "drag" the cursorline in another position the chart area is also zoomed in same time!?

What I want is when I move mouse cursor top of the cursorline, cursor icon change and when I press "mouseleftdown", I can drag and move the cursor line until I release the mouse button. During this cursorline moving, chart area is not allowed to zoom.

Here are some snapshot of the current code:

private CustomGridLine cursorLine = new CustomGridLine();

trendChart.DefaultView.ChartLegend.Header = "";

trendChart.DefaultView.ChartArea.EnableAnimations = false;

trendChart.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;

trendChart.DefaultView.ChartArea.AxisX.IsDateTime = true;

trendChart.DefaultView.ChartArea.AxisX.AutoRange = false;

trendChart.DefaultView.ChartArea.AxisX.LabelStep = 2;

trendChart.DefaultView.ChartArea.Margin = new Thickness(0, 0, 10, 0);

trendChart.DefaultView.ChartArea.AxisX.DefaultLabelFormat = "HH:mm:ss";

trendChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;

trendChart.MouseMove += new MouseEventHandler(trendChart_MouseMove);

trendChart.MouseEnter += new MouseEventHandler(trendChart_MouseEnter);

trendChart.MouseLeave += new MouseEventHandler(trendChart_MouseLeave);


cursorLine.Stroke = new SolidColorBrush(Colors.Red);

cursorLine.StrokeThickness = 2;


trendChart.DefaultView.ChartArea.Annotations.Add(cursorLine);

trendChart.DefaultView.ChartArea.AxisX.IsDateTime = true;

        void trendChart_MouseMove(object sender, MouseEventArgs e)
        {
            try
            {
                return;
                var plotAreaPanel = trendChart.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault();
                var position = e.GetPosition(plotAreaPanel);

                var x = trendChart.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(position.X);
                var y = trendChart.DefaultView.ChartArea.AxisY.ConvertPhysicalUnitsToData(position.Y);

                if (trendChart.DefaultView.ChartArea.HasItems)
                {
                    cursorLine.XIntercept = x;
.
.
.

Regards,
Auvo

[Evgenia]

Hi,

The sample project attached demonstrates how to drag the crosshair as my colleague Yavor mentioned using a boolean variable that controls when MouseMove event should be fired.
When you have enabled zooming & scrolling on your chart area it automatically changes its cursor to Hand to hint the user he can zoom using the selection rectangle. You can disable this selection rectangle by finding the DragZoomLayerControl, responsible for zooming & scrolling functionality, and disable its interactivity like this:

var dragZoomLayer = RadChart1.ChildrenOfType<DragZoomLayerControl>().Single();
dragZoomLayer.IsInteractive = false; // disable selection rectangle

It will be hard for you to manually position the cursor on the crossing point of the crosshair to drag it. I suggest that you remove your ZoomScroll functionality so that your crosshair can be dragged whenever you click on the exact crossing point or anywhere on the Plot Area.

Regards,
Evgenia
the Telerik team