ComponentOne WPF Edition
FlexChart / Working with FlexChart / End-User Interaction / Zooming and Panning
In This Topic
Zooming and Panning
In This Topic

Zooming

Zooming is the ability to enlarge an image or any visual content by adjusting its scale. You can use the mouse wheel or pinch gestures to enlarge the image, adjusting its scale based on user input. When zooming in, the image appears larger, and when zooming out, it shrinks.

You can perform zooming in FlexChart using the ZoomBehavior class. To implement zooming, you need to create an object of ZoomBehavior class available in the C1.WPF.Chart.Interaction namespace and add it to FlexChart's Behaviors collection using Add method. This method adds zoom behavior to the behavior collection by accessing it.

The GIF below shows how the FlexChart appears on zooming.

The following code examples demonstrate how to add and remove zooming in C# and XAML codes. These examples use the sample created in the Quick Start section.

//Add Zoom behavior
flexChart.Behaviors.Add(new C1.WPF.Chart.Interaction.ZoomBehavior());

//Remove Zoom behavior
var behavrToRemove = flexChart.Behaviors.FirstOrDefault( behavr => behavr.GetType() == typeof(C1.WPF.Chart.Interaction.ZoomBehavior));
flexChart.Behaviors.Remove(behavrToRemove);

The ZoomMode Property

In addition, you can use the ZoomMode property to enable touch based zooming in FlexChart. This property sets the gesture direction of zoom behavior through GestureMode enumeration which provides four zoom modes as given below:

The following code example shows how to enable touch based typing in FlexChart by creating the instance of the ZoomBehavior class:

CS
Copy Code 
ZoomBehavior zb = new ZoomBehavior();
zb.ZoomMode = GestureMode.X;
zb.ZoomMode = GestureMode.Y;

Zoom Box for Zooming

A zoom box allows users to select a specific area of a chart by dragging a rectangle, which then zooms into that selected region. This is often used to focus on a portion of the data. To implement a zoom box, you can capture the mouse drag events, draw a temporary selection box, and then update the chart to display only the region inside that box.

The GIF below shows how the FlexChart appears on zooming using the zoom box.

zooming

For the detailed implementation of the zoom box in FlexChart, refer FlexChartExplorer project at the following location:
\ ComponentOne Samples\WPF\v8.0\CS\Chart\FlexChartExplorer\View\Zoom

Panning

Panning allows the user to drag the image to move it around and view different areas after zooming. The mousedown, mousemove, and mouseup events handle dragging the image around.

Panning can be implemented in FlexChart by creating an object of TranslateBehavior class available in the C1.WPF.Chart.Interaction namespace and add it to FlexChart's Behaviors collection using Add method. This method adds translation behavior to the behavior collection by accessing it. In addition, you can use the TranslationMode property to enable touch based panning in FlexChart. This property sets the gesture direction of translation behavior through GestureMode enumeration.

The GIF below shows how the FlexChart appears on panning.

The following code examples demonstrate how to add and remove panning in C# and XAML. These examples use the sample created in the Quick Start section.

//Add Translate behavior
flexChart.Behaviors.Add(new C1.WPF.Chart.Interaction.TranslateBehavior());
//Remove Translate behavior
var behavrToRemove = flexChart.Behaviors.FirstOrDefault(behavr => behavr.GetType() == typeof(C1.WPF.Chart.Interaction.TranslateBehavior));
flexChart.Behaviors.Remove(behavrToRemove);