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

// MouseDragToPanXOrY.xaml

<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>

// MouseDragToPanXOrY.xaml.cs

// *************************************************************************************
// 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;
                }
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES