XamarinAndroidTutorial11

From Steema Software Reference Wiki
Jump to: navigation, search

Net android.png

Contents page
Previous | Next

Tutorial 11 - Zoom and Scroll


Zoom and Scroll are useful aids for focusing on specific data in a densely populated Chart.  


How to Zoom and Scroll using the Gestures

Zoom.Style
ZoomStyles.Classic
There are three ways to zoom in on a Chart, it depends on the Zoom.Style used, If Classic style, the default value, is selected the chart will respond to pinch gestures in standard Android style in a similar fashion it would in a traditional TeeChart desktop application, thus increasing size and zooming into the chart as fingers are dragged apart on the screen and reversing the zoom as fingers are dragged together. This allows the programmer absolute control on what's permitted on the chart regarding zooming and panning. The Allow property toggles zooming and the Direction property determines the directions in which zooming will be allowed. To undo the zoom, perform the double tap gesture.

ZoomStyles.FullChart
If FullChart style is selected the entirety of the chart will respond to pinch gestures in standard Android style as if the Chart was an image, thus increasing size and zooming into the chart as fingers are dragged apart on the screen and reversing the zoom as fingers are dragged together. To undo the zoom, perform the long or double tap gestures.

ZoomStyles.InChart
If ZoomStyles.InChart is used then the TeeChart series and axes will respond independently to pinch and drag gestures.

Scroll
To scroll a Chart across, tap with a finger and maintain pressed, drag in the direction you wish to scroll the Chart. When you release the finger the Chart will remain at the new location. Zoom.Style property also affects the way scroll is performed following the same characteristics as for zoom. Specially, using ZoomStyles.Classic, the programmer will be able to choose whether users can pan the chart in both directons, none or just one. That is achieved using the Panning.Allow property. To undo the scroll, do a long or double tap on the screen anywhere on the Chart area as for unzooming.

How to Zoom and Scroll by code

Zoom
Zoom is enabled by default. Use the Zoom.Allow property to disable zoom. See the Zoom Class for a full list of  properties and methods associated with Zoom. To define a rectangular area over which to Zoom use the ZoomRect method.

Example

[C#] 
tChart1.Zoom.ZoomRect(new Rectangle(100,100,120,120));

The ZoomRect co-ordinates are defined in screen pixels where 0,0 is the top left hand point of the Chart Panel.
The following code will zoom in on an area between the 2nd and 5th x-axis points, setting the y-axis to the scale of the  maximum and minimum points of the entire Chart:

[C#] 
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) -
tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.ZoomRect(r);

Use 'Undo' to Zoom back out.

TChart1.Zoom.Undo

Animated Zoom
Animated Zoom offers stepped zooming. Instead of jumping from 'zoomed out' to 'zoomed in' in one step, you may set  Animated to enable and define staggered steps for the zoom. Once Animated is enabled you may zoom manually with the  Mouse or by code.
Example

[C#] 
int x = points1.CalcXPos(2);
int y = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int height = tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MinYValue) -
tChart1.Axes.Left.CalcYPosValue(tChart1.Axes.Left.MaxYValue);
int width = points1.CalcXPos(5) - x;
Rectangle r = new Rectangle(x,y,width,height);
tChart1.Zoom.Animated = true;
tChart1.Zoom.AnimatedSteps = 100;
tChart1.Zoom.ZoomRect(r);

Zoom events
Zooming in manually, or by code, will trigger the TChart.Zoomed event. Zooming out will trigger the TChart.UndoneZoom event.

Scroll
Scroll is enabled in all directions as default.  Use the Scroll.Allow property to disable Scroll or limit Scroll to one direction. The easiest way to scroll by code is to use the Axis Scroll method:

[C#] 
tChart1.Axes.Bottom.Scroll(3, false);


The value is the offset. 'False' refers to whether or not TeeChart will allow scrolling beyond Series value limits.

Another way to control scroll is by defining the Axis maximum and minimum to scroll by code:

[C#] 
private void ViewDidLoad () {
        int range = Convert.ToInt32(bar1.XValues.Maximum - bar1.XValues.Minimum / 2);
        bar1.FillSampleValues(20);
        tChart1.Panning.Allow = ScrollModes.None;
        hScrollBar1.Value = range;
        hScrollBar1.Minimum = range - 50;
        hScrollBar1.Maximum = range 50;
}
    
private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e) {
        tChart1.Axes.Bottom.Automatic = false;
        tChart1.Axes.Bottom.Minimum = e.NewValue;
        tChart1.Axes.Bottom.Maximum = e.NewValue bar1.Count;
}




PREVIOUS

NEXT


© 1998-2019 Steema Software SL. All rights reserved.