Hi Nicholas,
The Xamarin.Forms Chart control has support for panning and zooming using the
PanAndZoomBehavior with
PanMode and
ZoomMode set to
Horizontal. However, these can only be
set by user gestures.
At this time there is no programmatic way to set the precise zoom and pan amount from Xamarin.Forms.
Custom Development Using Native Control Features
You can access the native controls that get rendered on the platforms by our Platform Renderer using a Xamarin.Forms custom renderer,
see the article on registering custom renderers.
An alternative approach is to access native controls using a new Xamarin feature called
Xamarin.Forms Effects,
see Microsoft's documentation on how to use Platform Effect. If you would like to be able to pass a value from the Xamarin.Forms project,
you can easily pass parameters to an effect.
With access to the native control, you can manually set each platform's specific usage of the manipulation of the canvas area.
iOS - You can set the
XAxis.Pan and XAxis.Zoom values on the axis, see the
native TKChartView Pan documentation
UWP - You can use the ChartBase to set
ScrollOffset and
Zoom
Android - You can use the
SetPanOffset and SetZoom methods
Custom Implementation
If you would like to move forward and try the native approach, I can give you a good head start. Please note that the code below is not production ready and will require experimentation and testing in your scenario to get the exact results you want. Additionally, I strongly recommend first reviewing the above Effect articles I linked to above so that you know where to put the following classes.
Okay, let's get started...
Routing Effect
In the XF project, you can have the
Routing Effect class defined with 3 parameters. This is because all three platforms have different ways to set the values. However, you could just have one and do the conversion to the native platform type in the platform's Effect.
Important Note: In order for Pan to even work, there must be an initial amount of Zoom applied (otherwise, there is nothing to pan to). In this case, I have added a ZoomLevel property to the effect.
With that defined, you can apply the Effect to the chart instance and set the experiment values:
iOS Platform Effect
Now, in the iOS Platform Effect class,
retrieve the values from the Routing Effect and apply them to the native control
Runtime
In my test, I have 10 categories, so there will be 10 X-axis positions. Setting the normalized Pan to 4, the chart loaded at the 5th position on the axis:
UWP Platform Effect
The ChartBase class has a couple helpful properties we can use. Please take a moment to review
Zoom and
ScrollOffset property descriptions in the
Properties documentation, this is critical to understanding what values to use.
Runtime
If you go back to the XAML, you'll see that I set the UWP pan to
-1, this will shift the axis exactly
one viewport-width over. Since I set the zoom level to 2x, this represents exactly half of the viewable area and should start at exactly halfway..
the "Six" category.
Android Platform Effect
Android has two methods you can use: SetZoom and SetPanOffset
Further Assistance
Due to the complexity of this configuration, if you need additional assistance with the native controls,
please open an official support ticket using your Support License so that the development team for that native control can provide additional insight into the native chart's functionality.
I hope I was able to help you get closer to your goal.
Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items