SciChart - zooming and panning from code in MVVM

Question

I have buttons in my UI that must pan the X axis left and right, and zoom in or out. The problem is it's MVVM, so I can't just do something like XAxis.Zoom() because the view model can't directly access the view. And all the zoom modifiers I can define in xaml seem to deal with reacting to mouse/touch events directly on the control. How do I go about manipulating the axis from code without violating MVVM constraints?

EDIT: I should also add that I'm using SciChart version 3.3.1, and there's no space in current iteration to update to a new major version with potentially breaking API changes.

score 0 · Answer 1 · answered Apr 18 '16 at 13:42

0

The Zoom functions seem to modify the VisibleRange property, so the solution was to simply bind the VisibleRange of the axis to a viewmodel property, and then modify the property accordingly. You may also want to set AutoRange to Never.

answered Apr 18 '16 at 13:42

Shaggydog

3,456
7
33
50

score 0 · Accepted Answer · answered Apr 18 '16 at 13:44

The simplest way to control viewport zoom from a ViewModel is to bind to VisibleRange, e.g.

View

<s:SciChartSurface>
   <!-- RenderableSeries omitted -->

   <s:SciChartSurface.XAxis>
       <s:NumericAxis VisibleRange="{Binding XVisibleRange}"/>
   </s:SciChartSurface.XAxis>

   <s:SciChartSurface.YAxis>
       <s:NumericAxis VisibleRange="{Binding YVisibleRange}"/>
   </s:SciChartSurface.YAxis>
</s:SciChartSurface>

ViewModel

// Viewmodel, I assume you will implement INotifyPropertyChanged 

public DoubleRange XVisibleRange { get;set; }
public DoubleRange YVisibleRange { get;set; }

This technique is used in a number of SciChart Examples to provide scrolling.

ChartModifier API

If you wish to call the methods Zoom(), Scroll() directly on the Axis, the best way to do this is in the ChartModifier API.

Using this API you can create a number of behaviours that react to mouse buttons, key input and can have direct access to the XAxis, YAxis, RenderableSeries so that you can zoom and pan.

There are examples of creating custom modifiers which can zoom and pan here. Zooming Panning programmatically is possible from within these classes so I would suggest routing your events or messages to a ChartModifierBase derived class to manipulate the chart.

SciChart - zooming and panning from code in MVVM

2 Answers2