SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components
WPF Chart Mousewheel Zoom and Scroll
// WPF Chart Examples
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 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
// Source Code
The C#/WPF source code for the WPF Chart Mousewheel Zoom and Scroll example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.WPF.Examples from Github.
- Or, view source and export each example to a Visual Studio project from the SciChart WPF Examples suite.
- Also the SciChart WPF Trial contains the full source for the examples (link below).
// 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-2018. 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();
}
}
}
}