RadChart Zoom and Container Scrollviewer

[Ionut]

Hi, I have a problem with the zooming and scrolling in a simple chart application. My screen has multiple charts (line charts in this particular example), and a Scrollviewer that contains them all. The problem is that when I want to zoom in in a chart it scrolls up and when I zoom out it scrolls down in the same time. I have tried to resolve this problem by checking when the mouse is inside the chart zone and disable the scrollviewer but it didn't work because that disabled my mouse wheel for good..

This is the code I used to disable the mouse wheel for the scrollviewer and pass it to the chart control:

private UIElement chart;

private void MouseLeaveChart(LineChartView lineChartView)
{
    // this is triggered when the mouse leaves the chart area
    chart = null;
}

private void MouseEnterChart(RadCartesianChart radCartesianChart)
{
    // this is triggered when the mouse enters the chart area
    chart = radCartesianChart;
}

private void ScrollViewer_OnPreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    if (chart != null)
    {
        e.Handled = true;
        var e2 = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
        e2.RoutedEvent = UIElement.MouseWheelEvent;
        chart.RaiseEvent(e2);
    }
}

Any kind of help is highly appreciated, thank you in advance! 

 

[Peshito]

Hello,

In order to achieve your expected result please attach to chart's MouseWheel event like shown below:

Copy Code

void chart_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            var pos = e.GetPosition(this.chart);
            ChartPanAndZoomBehavior behav = (ChartPanAndZoomBehavior)this.chart.Behaviors.FirstOrDefault(b => b is ChartPanAndZoomBehavior);
            bool isZoom = behav != null;
            if (!isZoom)
            {
                return;
            }

            e.Handled = true;
        }

This will make sure that the chart will zoom only when the mouse is over it. Otherwise, scrolling outside of the chart area will scroll the ScrollViewer.

Attached is a sample project demonstrating the above approach.

Hope it helps.

Regards,
Peshito
Telerik