Adding Gesture-based Interaction to WinRT Chart

With the new C1Chart for WinRT XAML you can enhance the end-user experience by allowing users to zoom (scale) and scroll (translate) the chart along its axes using gestures. You can customize the actions by specifying which manipulation modes should be used in conjunction with which gestures.

Supported Gestures:

• DoubleTap
• Pinch
• Slide

Supported Actions:

• Scale (Zoom) – supported by DoubleTap, Pinch or Slide gestures.
• Translate (Scroll) – supported by Slide gesture only.

Example: Enable Translate Sliding Behavior

The most useful interactive behavior in C1Chart is translation by a sliding gesture. This allows users to translate (or scroll) the chart along any axis. For example, to enable translation along the x-axis you must set the initial scale and assign the Translate GestureSlideAction to the desired gesture, which in this case would be GestureSlide.

// initialize axis scale and scrollbar  
c1Chart1.View.AxisX.Scale = 0.5;  
c1Chart1.View.AxisX.ScrollBar = new AxisScrollBar();  

// remove any action update delay  
c1Chart1.ActionUpdateDelay = 0;  

// set manipulation mode to translate X axis with inertia  
c1Chart1.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateInertia;  

// assign translate action to slide gesture  
c1Chart1.GestureSlide = GestureSlideAction.Translate;  

Example: Enable Scale DoubleTap and Pinch Behavior

In addition to translation you can also enable scaling, which enables the user to zoom in on the plot area. You can enable scaling for both pinch and double-tap gestures. For example, the user can double tap to zoom-in and then pinch to zoom in/out. For example, to enable scaling for both double tap and pinching gestures add the following code.

// initialize scroll bars  
c1Chart1.View.AxisX.ScrollBar = new AxisScrollBar();  
c1Chart1.View.AxisY.ScrollBar = new AxisScrollBar();  

// remove any action update delay  
c1Chart1.ActionUpdateDelay = 0;  

// set manipulation mode to scale and translate  
c1Chart1.ManipulationMode = ManipulationModes.Scale | // scale without inertia  
    ManipulationModes.TranslateX | // translate x axis  
    ManipulationModes.TranslateY | // translate y axis  
    ManipulationModes.TranslateInertia; // translate with inertia  

// assign translate action to slide gesture  
c1Chart1.GestureSlide = GestureSlideAction.Translate;  

// assign scale action to double tap and pinch gestures  
c1Chart1.GestureDoubleTap = GestureDoubleTapAction.Scale;  
c1Chart1.GesturePinch = GesturePinchAction.Scale;  

You can check out the Interactive Zoom sample that installs with the CTP controls to see all of this in action.