Demonstrates the many modes of operation of the MouseWheelZoomModifier. The default mode is Zoom around a point in the X and Y directions. ChartModifiers can be added to the SciChartSurface via the SciChartSurface.ChartModifier property, or via a ModifierGroup

Additional modes are the ability to zoom in one direction only, or pan via the mouse-wheel. Try pressing CTRL or SHIFT while mouse-wheel scrolling to see the effect.

Finally, double-click to reset zoom at any time. This functionality is provided by the ZoomExtentsModifier

Documentation links

– ChartModifiers provided by SciChart
– MouseWheelZoomModifier Type

// MouseWheelToZoomPan.xaml

<UserControl x:Class="SciChart.Examples.Examples.ZoomAndPanAChart.MouseWheelToZoomPan"
             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="MouseWheelToZoomPan_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>

            <ext:EnumValueToStringConverter x:Key="SelectedEnumValueConverter" />
        </ResourceDictionary>

    </UserControl.Resources>

    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--  The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality  -->
        <!--  to the chart and is included for example purposes.  -->
        <!--  If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite!  -->
        <Border Background="#FF232426"
                BorderBrush="#323539"
                Panel.ZIndex="9999"
                BorderThickness="0,0,2,0">

            <WrapPanel HorizontalAlignment="Left"
                       Orientation="Vertical">

                <ext:FlyoutMenuButton HorizontalAlignment="Left"
                                      Content="Wheel"
                                      Style="{StaticResource MouseWheelButtonStyle}"
                                      ToolTipService.ToolTip="MouseWheel">

                    <ext:FlyoutMenuButton.PopupContent>
                        <StackPanel MinWidth="150" Orientation="Vertical">
                            <TextBlock Text="Action Type" />

                            <ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:ActionType}}}" SelectedItem="{Binding Source={x:Reference Name=mouseWheelZoomModifier}, Path=ActionType, Mode=TwoWay, Converter={StaticResource SelectedEnumValueConverter}}" />

                            <ext:FlyoutSeparator />

                            <TextBlock Text="Direction" />

                            <ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:XyDirection}}}" SelectedItem="{Binding Source={x:Reference Name=mouseWheelZoomModifier}, Path=XyDirection, Mode=TwoWay, Converter={StaticResource SelectedEnumValueConverter}}" />

                        </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:FastCandlestickRenderableSeries x:Name="candlestickSeries" />
                <s:FastLineRenderableSeries x:Name="lineSeries0" Stroke="#FF1919" />
                <s:FastLineRenderableSeries x:Name="lineSeries1" Stroke="#1964FF" />
                <s:FastLineRenderableSeries x:Name="lineSeries2" Stroke="#FF9B27" />
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis GrowBy="0.1, 0.1" />
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:MouseWheelZoomModifier x:Name="mouseWheelZoomModifier" />
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>
    </Grid>

</UserControl>

// MouseWheelToZoomPan.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// MouseWheelToZoomPan.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 System.Windows.Controls.Primitives;
using SciChart.Charting;
using SciChart.Charting.Model.DataSeries;
using SciChart.Examples.ExternalDependencies.Common;
using SciChart.Examples.ExternalDependencies.Data;

namespace SciChart.Examples.Examples.ZoomAndPanAChart
{
    public partial class MouseWheelToZoomPan : UserControl
    {
        public MouseWheelToZoomPan()
        {
            InitializeComponent();
        }

        private void MouseWheelToZoomPan_Loaded(object sender, RoutedEventArgs e)
        {
            using (sciChart.SuspendUpdates())
            {
                // Create some dataseries of type x=DateTime, y=Double
                var dataSeries0 = new OhlcDataSeries<DateTime, double>();
                var dataSeries1 = new XyDataSeries<DateTime, double>();
                var dataSeries2 = new XyDataSeries<DateTime, double>();
                var dataSeries3 = new XyDataSeries<DateTime, double>();

                // Prices are in the format Time, Open, High, Low, Close (all IList)
                var prices = DataManager.Instance.GetPriceData(Instrument.Indu.Value, TimeFrame.Daily);

                // Append data to series. 
                // First series is rendered as a Candlestick Chart so we append OHLC data
                dataSeries0.Append(prices.TimeData, prices.OpenData, prices.HighData, prices.LowData, prices.CloseData);

                // Subsequent series append moving average of the close prices
                dataSeries1.Append(prices.TimeData, DataManager.Instance.ComputeMovingAverage(prices.CloseData, 100));
                dataSeries2.Append(prices.TimeData, DataManager.Instance.ComputeMovingAverage(prices.CloseData, 50));
                dataSeries3.Append(prices.TimeData, DataManager.Instance.ComputeMovingAverage(prices.CloseData, 20));

                candlestickSeries.DataSeries = dataSeries0;
                lineSeries0.DataSeries = dataSeries1;
                lineSeries1.DataSeries = dataSeries2;
                lineSeries2.DataSeries = dataSeries3;

                sciChart.ZoomExtents();
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES