SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
Demonstrates using the ZoomPanModifier, part of the ChartModifier API, which allows panning the chart while dragging the mouse.
Mouse-dragging of of the SciChartSurface causes the viewport to pan.
Tips!
– With the ZoomPanModifier.XyDirection property, Panning may be limited to the X Direction, Y Direction or XY (both) directions.
– With the ZoomPanModifier.ZoomExtentsY property, the YAxis zooms to extents as you pan. This is useful for trading charts.
– When the ZoomPanModifier.ClipModeX property, you can control how the series behaves as you pan to the edge of the data. The default mode is ClipMode.StretchAtExtents, which causes a zooming (stretch) action when you reach the edge of the data.
– The ZoomPanModifier may be disabled on one or more axis by setting the attached property ZoomPanModifier.IncludeSeries=”False” on an Axis. The default value is true.
Documentation Links
– ChartModifiers Provided by SciChart
– ZoomPanModifier Type
The C#/WPF source code for the WPF Chart Pan Y or X Direction example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
<UserControl x:Class="SciChart.Examples.Examples.ZoomAndPanAChart.MouseDragToPanXOrY"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
Loaded="MouseDragToPanXOrY_Loaded"
d:DesignHeight="400"
d:DesignWidth="600"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/ToolbarButtonsCommon.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="#FF232426"
BorderBrush="#323539"
Panel.ZIndex="9999"
BorderThickness="0,0,2,0">
<WrapPanel HorizontalAlignment="Left"
Orientation="Vertical">
<ext:FlyoutMenuButton x:Name="panModExample"
HorizontalAlignment="Left"
Padding="0"
Content="Pan"
Style="{StaticResource FlyoutMenuButtonStyle}"
ToolTipService.ToolTip="Pan">
<ext:FlyoutMenuButton.PopupContent>
<StackPanel MinWidth="150" Orientation="Vertical">
<TextBlock Text="Pan SciChart in" />
<ComboBox x:Name="panXYDirection"
SelectedIndex="2"
SelectionChanged="PanXYDirection_OnSelectionChanged" />
<StackPanel x:Name="zoomExtentsPanel">
<ext:FlyoutSeparator />
<TextBlock Text=" When panning in X: " />
<CheckBox x:Name="chkZoomExtentsY"
Margin="3"
Checked="ZoomExtentsY_OnStateChanged"
Content="Zoom Extents on Y"
Unchecked="ZoomExtentsY_OnStateChanged" />
</StackPanel>
</StackPanel>
</ext:FlyoutMenuButton.PopupContent>
</ext:FlyoutMenuButton>
<Button HorizontalAlignment="Left"
Command="{Binding Source={x:Reference Name=sciChart}, Path=AnimateZoomExtentsCommand}"
Content="Zoom Extents"
Style="{StaticResource ZoomExtentsButtonStyle}"
ToolTipService.ToolTip="Zoom to Extents" />
</WrapPanel>
</Border>
<s:SciChartSurface x:Name="sciChart" Grid.Column="1">
<s:SciChartSurface.RenderableSeries>
<s:FastMountainRenderableSeries Fill="#771964FF"
Stroke="#FF0944CF"
YAxisId="SecondaryAxis">
<s:FastMountainRenderableSeries.SeriesAnimation>
<s:WaveAnimation AnimationDelay="0:0:1" Duration="0:0:3" PointDurationFraction="0.3"/>
</s:FastMountainRenderableSeries.SeriesAnimation>
</s:FastMountainRenderableSeries>
<s:FastLineRenderableSeries Stroke="#FF279B27"
StrokeThickness="2"
YAxisId="PrimaryAxis">
<s:FastLineRenderableSeries.SeriesAnimation>
<s:WaveAnimation AnimationDelay="0:0:1" Duration="0:0:3" PointDurationFraction="0.3"/>
</s:FastLineRenderableSeries.SeriesAnimation>
</s:FastLineRenderableSeries>
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
<s:NumericAxis GrowBy="0.1, 0.1" />
</s:SciChartSurface.XAxis>
<!-- Create Y Axes on the Left and Right -->
<s:SciChartSurface.YAxes>
<s:NumericAxis AxisAlignment="Right"
GrowBy="0.1, 0.1"
Id="PrimaryAxis"
TickTextBrush="#FF279B27" />
<s:NumericAxis AxisAlignment="Left"
GrowBy="0.1, 0.1"
Id="SecondaryAxis"
TickTextBrush="#FF4083B7" />
</s:SciChartSurface.YAxes>
<!-- Adding the ZoomPanModifier gives SciChart the ability to pan on mouse-drag -->
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:ZoomPanModifier x:Name="zoomPanModifier"
ExecuteOn="MouseLeftButton"
IsEnabled="True"
XyDirection="XDirection"
ZoomExtentsY="False" />
<s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
</s:SciChartSurface>
</Grid>
</UserControl>
// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales: sales@scichart.com
//
// MouseDragToPanXOrY.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
// *************************************************************************************
using System;
using System.Windows;
using System.Windows.Controls;
using SciChart.Charting;
using SciChart.Charting.Model.DataSeries;
using SciChart.Data.Model;
using SciChart.Examples.ExternalDependencies.Data;
namespace SciChart.Examples.Examples.ZoomAndPanAChart
{
public partial class MouseDragToPanXOrY : UserControl
{
public MouseDragToPanXOrY()
{
InitializeComponent();
}
private void MouseDragToPanXOrY_Loaded(object sender, RoutedEventArgs e)
{
// Performing multiple updates in a SuspendUpdates block is efficient as only one redraw is performed
using (sciChart.SuspendUpdates())
{
// Add some data series
var dataSeries0 = new XyDataSeries<double, double>();
var dataSeries1 = new XyDataSeries<double, double>();
var data2 = DataManager.Instance.GetFourierSeries(1.0, 0.1);
var data1 = DataManager.Instance.GetDampedSinewave(1500, 3.0, 0.0, 0.005, data2.Count);
// Append data to series.
dataSeries0.Append(data1.XData, data1.YData);
dataSeries1.Append(data2.XData, data2.YData);
// Assign data-series to renderable series
sciChart.RenderableSeries[0].DataSeries = dataSeries0;
sciChart.RenderableSeries[1].DataSeries = dataSeries1;
// Set initial zoom
sciChart.XAxis.VisibleRange = new DoubleRange(3, 6);
sciChart.ZoomExtentsY();
}
panXYDirection.ItemsSource = Enum.GetNames(typeof(XyDirection));
}
// Optional: demonstrates changing which direction the ZoomPanModifier operates in
private void ZoomExtentsY_OnStateChanged(object sender, RoutedEventArgs e)
{
if (zoomPanModifier != null)
{
zoomPanModifier.ZoomExtentsY = chkZoomExtentsY.IsChecked == true;
}
}
private void PanXYDirection_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (zoomPanModifier != null)
{
zoomPanModifier.XyDirection = (XyDirection) Enum.Parse(typeof(XyDirection), (string) panXYDirection.SelectedValue);
if (zoomExtentsPanel != null)
{
zoomExtentsPanel.Visibility = zoomPanModifier.XyDirection == XyDirection.XDirection
? Visibility.Visible
: Visibility.Collapsed;
}
}
}
}
}