Class ChartZoomPanBehavior

ZoomPanBehavior enables zooming and panning operations over a cartesian chart.

Inheritance

System.Object

ChartBehavior

ChartZoomPanBehavior

Inherited Members

ChartBehavior.OnHolding(HoldingRoutedEventArgs)

ChartBehavior.OnPointerEntered(PointerRoutedEventArgs)

ChartBehavior.OnPointerExited(PointerRoutedEventArgs)

ChartBehavior.OnRightTapped(RightTappedRoutedEventArgs)

ChartBehavior.OnTapped(TappedRoutedEventArgs)

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public class ChartZoomPanBehavior : ChartBehavior

Remarks

To enable the zooming and panning in the chart, create an instance of ChartZoomPanBehavior and set it to the ZoomPanBehavior property of SfCartesianChart.

It provides the following options to customize the chart zooming:

Zooming - To zoom into the chart area, refer to the EnablePinchZooming, and EnableMouseWheelZooming properties.

ZoomMode - To define the zooming direction, refer to the ZoomMode property.

EnablePanning - To enable panning, refer to the EnablePanning property.

Note: This is only applicable for SfCartesianChart.

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePanning = "True" EnablePinchZooming="True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue1"/>
    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue2"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePinchZooming = true, 
   EnablePanning = true,
};

LineSeries series1 = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue1",
};
chart.Series.Add(series1);

LineSeries series2 = new LineSeries()
{
   ItemsSource = viewmodel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue2",
};
chart.Series.Add(series2);

Constructors

ChartZoomPanBehavior()

Initializes a new instance of the ChartZoomPanBehavior.

Declaration

public ChartZoomPanBehavior()

Fields

EnableDirectionalZoomingProperty

The DependencyProperty for EnableDirectionalZooming property.

Declaration

public static readonly DependencyProperty EnableDirectionalZoomingProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

EnableMouseWheelZoomingProperty

The DependencyProperty for EnableMouseWheelZooming property.

Declaration

public static readonly DependencyProperty EnableMouseWheelZoomingProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

EnablePanningProperty

The DependencyProperty for EnablePanning property.

Declaration

public static readonly DependencyProperty EnablePanningProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

EnablePinchZoomingProperty

The DependencyProperty for EnablePinchZooming property.

Declaration

public static readonly DependencyProperty EnablePinchZoomingProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

ZoomModeProperty

The DependencyProperty for ZoomMode property.

Declaration

public static readonly DependencyProperty ZoomModeProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty

Properties

EnableDirectionalZooming

Gets or sets a value indicating whether the directional zooming is enabled.

Declaration

public bool EnableDirectionalZooming { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and the default value is `false`.

Remarks

If this property is false, zooming is performed based on ZoomMode property. If this property is true, zooming is performed based on pinch direction of the user.

This property having effect only with ZoomMode value as XY.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableDirectionalZooming="True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnableDirectionalZooming = true, 
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

EnableMouseWheelZooming

Gets or sets a value indicating whether the mouse wheel zooming is enabled.

Declaration

public bool EnableMouseWheelZooming { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and the default value is `true`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnableMouseWheelZooming = "True" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnableMouseWheelZooming = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

EnablePanning

Gets or sets a value indicating whether the panning is enabled.

Declaration

public bool EnablePanning { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and the default value is `true`.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePanning = "True" />
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePanning = true,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

EnablePinchZooming

Gets or sets a value indicating whether the finger gesture is enabled or disabled.

Declaration

public bool EnablePinchZooming { get; set; }

Property Value

Type	Description
System.Boolean	It accepts the bool values and its default value is `true`.

Remarks

If this property is true, zooming is performed based on the pinch gesture of the user. If this property is false, zooming is performed based on the mouse wheel of the user.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior EnablePinchZooming="True"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   EnablePinchZooming = true, 
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ZoomMode

Gets or sets the mode for zooming direction.

Declaration

public ZoomMode ZoomMode { get; set; }

Property Value

Type	Description
ZoomMode	It accepts the ZoomMode values and the default value is XY.

Remarks

The zooming can be done both horizontally and vertically.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <!--omitted for brevity-->

    <chart:SfCartesianChart.ZoomPanBehavior>
       <chart:ChartZoomPanBehavior ZoomMode="X"/>
    </chart:SfCartesianChart.ZoomPanBehavior>

    <chart:LineSeries ItemsSource="{Binding Data}"
                      XBindingPath="XValue"
                      YBindingPath="YValue"/>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// omitted for brevity
chart.ZoomPanBehavior = new ChartZoomPanBehavior() 
{ 
   ZoomMode = ZoomMode.X,
};

LineSeries series = new LineSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

Methods

OnDoubleTapped(DoubleTappedRoutedEventArgs)

Declaration

protected override void OnDoubleTapped(DoubleTappedRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.DoubleTappedRoutedEventArgs	e

Overrides

ChartBehavior.OnDoubleTapped(DoubleTappedRoutedEventArgs)

OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)

Declaration

protected override void OnManipulationCompleted(ManipulationCompletedRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.ManipulationCompletedRoutedEventArgs	e

Overrides

ChartBehavior.OnManipulationCompleted(ManipulationCompletedRoutedEventArgs)

OnManipulationDelta(ManipulationDeltaRoutedEventArgs)

Declaration

protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs	e

Overrides

ChartBehavior.OnManipulationDelta(ManipulationDeltaRoutedEventArgs)

OnManipulationStarted(ManipulationStartedRoutedEventArgs)

Declaration

protected override void OnManipulationStarted(ManipulationStartedRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.ManipulationStartedRoutedEventArgs	e

Overrides

ChartBehavior.OnManipulationStarted(ManipulationStartedRoutedEventArgs)

OnPointerMoved(PointerRoutedEventArgs)

Declaration

protected override void OnPointerMoved(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerMoved(PointerRoutedEventArgs)

OnPointerPressed(PointerRoutedEventArgs)

Declaration

protected override void OnPointerPressed(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerPressed(PointerRoutedEventArgs)

OnPointerReleased(PointerRoutedEventArgs)

Declaration

protected override void OnPointerReleased(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerReleased(PointerRoutedEventArgs)

OnPointerWheelChanged(PointerRoutedEventArgs)

Declaration

protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

Overrides

ChartBehavior.OnPointerWheelChanged(PointerRoutedEventArgs)

Reset()

Resets the zoom factor and zoom position for all the axis.

Declaration

public void Reset()

Zoom(Double, ChartAxis)

Zooms the specified cumulative scale.

Declaration

public bool Zoom(double cumulativeScale, ChartAxis axis)

Parameters

Type	Name	Description
System.Double	cumulativeScale	The cumulative scale.
ChartAxis	axis	The axis.

Returns

Type	Description
System.Boolean