Skip to content

Commit b45690b

Browse files
SyncfusionKarthikeyanSyncfusionKarthikeyan
authored
Merge pull request #1 from SyncfusionExamples/ZoomInandZoomOutWPFChart
How to zoom in and out of a WPF Chart in the scroll viewer
2 parents 004e8c2 + 523b913 commit b45690b

File tree

72 files changed

+211287
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+211287
-2
lines changed

‎README.md‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,51 @@
1-
# How-to-zoom-in-and-out-of-a-WPF-Chart-in-the-scroll-viewer
2-
This article explains how to perform chart zooming instead of vertical scrolling within a scroll viewer
1+
# How to zoom in and out of a WPF Chart in the scroll viewer
2+
The article describes how to perform chart zooming within the scroll viewer using the mouse wheel. To enable zooming through the mouse wheel, set the [EnableMouseWheelZooming](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html#Syncfusion_UI_Xaml_Charts_ChartZoomPanBehavior_EnableMouseWheelZooming) property of [ChartZoomPanBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html) to true.
3+
4+
The default behavior is that when the chart is placed inside the scroll viewer, it scrolls up or down instead of zooming in or out. By limiting the scrolling action to the scroll viewer, we can zoom in or out of the chart without any unintended interactions.
5+
![DefaultScollViewerDisplay](https://user-images.githubusercontent.com/105496706/228227912-cb158545-f566-45fe-85ad-ae84cb03fbdf.gif)
6+
The scrolling action inside the scroll viewer has been restricted according to the following code samples:
7+
8+
**[C#]**
9+
```
10+
public class ScrollViewerExt: ScrollViewer
11+
{
12+
protected override void OnMouseWheel(MouseWheelEventArgs e)
13+
{
14+
// To restrict scroll action on chart
15+
if (e.Source is SfChart)
16+
return;
17+
18+
base.OnMouseWheel(e);
19+
}
20+
}
21+
```
22+
**[XAML]**
23+
```
24+
<local:ScrollViewerExt VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden" >
25+
<StackPanel>
26+
<chart:SfChart x:Name="chart">
27+
. . .
28+
<chart:SfChart.Behaviors >
29+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
30+
</chart:SfChart.Behaviors>
31+
. . .
32+
</chart:SfChart>
33+
<chart:SfChart x:Name="chart1">
34+
. . .
35+
<chart:SfChart.Behaviors >
36+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
37+
</chart:SfChart.Behaviors>
38+
. . .
39+
</chart:SfChart>
40+
41+
<chart:SfChart x:Name="chart2">
42+
. . .
43+
<chart:SfChart.Behaviors >
44+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
45+
</chart:SfChart.Behaviors>
46+
. . .
47+
</chart:SfChart>
48+
</StackPanel>
49+
</local:ScrollViewerExt>
50+
```
51+
![RestrictedScrollDisplay](https://user-images.githubusercontent.com/105496706/228233809-eae9a7bc-c5b4-408a-8ce2-27991f1e5110.gif)

‎Zoom_WPF_Chart_Inside_ScrollViewer/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="Zoom_WPF_Chart_Inside_ScrollViewer.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:Zoom_WPF_Chart_Inside_ScrollViewer"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎Zoom_WPF_Chart_Inside_ScrollViewer/App.xaml.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Configuration;
4+
using System.Data;
5+
using System.Linq;
6+
using System.Threading.Tasks;
7+
using System.Windows;
8+
9+
namespace Zoom_WPF_Chart_Inside_ScrollViewer
10+
{
11+
/// <summary>
12+
/// Interaction logic for App.xaml
13+
/// </summary>
14+
public partial class App : Application
15+
{
16+
}
17+
}

‎Zoom_WPF_Chart_Inside_ScrollViewer/MainWindow.xaml‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<Window x:Class="Zoom_WPF_Chart_Inside_ScrollViewer.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:Zoom_WPF_Chart_Inside_ScrollViewer"
7+
mc:Ignorable="d"
8+
Title="MainWindow" Height="450" Width="800"
9+
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
10+
11+
<Window.DataContext>
12+
<local:ViewModel/>
13+
</Window.DataContext>
14+
15+
<local:ScrollViewerExt Margin="30" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden" >
16+
<StackPanel>
17+
<chart:SfChart x:Name="chart" Header="2018 Sales">
18+
<chart:SfChart.Legend>
19+
<chart:ChartLegend/>
20+
</chart:SfChart.Legend>
21+
<chart:SfChart.PrimaryAxis>
22+
<chart:DateTimeAxis LabelFormat="MMM dd">
23+
</chart:DateTimeAxis>
24+
</chart:SfChart.PrimaryAxis>
25+
<chart:SfChart.SecondaryAxis>
26+
<chart:NumericalAxis Interval="500"/>
27+
</chart:SfChart.SecondaryAxis>
28+
<chart:SfChart.Behaviors >
29+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
30+
</chart:SfChart.Behaviors>
31+
<chart:SplineSeries Label="ProductA" XBindingPath="Date" YBindingPath="Sales" ItemsSource="{Binding ProductA}" ShowTooltip="True">
32+
<chart:SplineSeries.AdornmentsInfo>
33+
<chart:ChartAdornmentInfo ShowMarker="True" SymbolInterior="Red" Symbol="Ellipse">
34+
</chart:ChartAdornmentInfo>
35+
</chart:SplineSeries.AdornmentsInfo>
36+
</chart:SplineSeries>
37+
<chart:SplineSeries Label="ProductB" XBindingPath="Date" YBindingPath="Sales" ItemsSource="{Binding ProductB}" ShowTooltip="True">
38+
<chart:SplineSeries.AdornmentsInfo>
39+
<chart:ChartAdornmentInfo ShowMarker="True" SymbolInterior="Green" Symbol="Ellipse">
40+
</chart:ChartAdornmentInfo>
41+
</chart:SplineSeries.AdornmentsInfo>
42+
</chart:SplineSeries>
43+
</chart:SfChart>
44+
45+
<chart:SfChart x:Name="chart1" Header="2018 Sales- revenue and profit percent">
46+
<chart:SfChart.Legend>
47+
<chart:ChartLegend/>
48+
</chart:SfChart.Legend>
49+
<chart:SfChart.PrimaryAxis>
50+
<chart:DateTimeAxis LabelFormat="MMM">
51+
</chart:DateTimeAxis>
52+
</chart:SfChart.PrimaryAxis>
53+
<chart:SfChart.SecondaryAxis>
54+
<chart:NumericalAxis Visibility="Hidden"/>
55+
</chart:SfChart.SecondaryAxis>
56+
<chart:SfChart.Behaviors >
57+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
58+
</chart:SfChart.Behaviors>
59+
<chart:ColumnSeries Label="Revenue" XBindingPath="Date" YBindingPath="Revenue" ItemsSource="{Binding Revenue}" ShowTooltip="True"/>
60+
<chart:ColumnSeries Label="Profit" XBindingPath="Date" YBindingPath="Profit" ItemsSource="{Binding Profit}" ShowTooltip="True"/>
61+
</chart:SfChart>
62+
63+
<chart:SfChart x:Name="chart2" Header="Number of sales closed by Sales Rep - 2018">
64+
<chart:SfChart.PrimaryAxis>
65+
<chart:CategoryAxis>
66+
</chart:CategoryAxis>
67+
</chart:SfChart.PrimaryAxis>
68+
<chart:SfChart.SecondaryAxis>
69+
<chart:NumericalAxis Interval="100" Maximum="300" />
70+
</chart:SfChart.SecondaryAxis>
71+
<chart:SfChart.Behaviors >
72+
<chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" />
73+
</chart:SfChart.Behaviors>
74+
<chart:BarSeries XBindingPath="Name" YBindingPath="Sales" ItemsSource="{Binding Data}" ShowTooltip="True" />
75+
</chart:SfChart>
76+
</StackPanel>
77+
</local:ScrollViewerExt>
78+
79+
</Window>

‎Zoom_WPF_Chart_Inside_ScrollViewer/MainWindow.xaml.cs‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
using Syncfusion.UI.Xaml.Charts;
2+
using System;
3+
using System.Collections.Generic;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
using System.Windows;
8+
using System.Windows.Controls;
9+
using System.Windows.Data;
10+
using System.Windows.Documents;
11+
using System.Windows.Input;
12+
using System.Windows.Media;
13+
using System.Windows.Media.Imaging;
14+
using System.Windows.Navigation;
15+
using System.Windows.Shapes;
16+
17+
namespace Zoom_WPF_Chart_Inside_ScrollViewer
18+
{
19+
/// <summary>
20+
/// Interaction logic for MainWindow.xaml
21+
/// </summary>
22+
public partial class MainWindow : Window
23+
{
24+
public MainWindow()
25+
{
26+
InitializeComponent();
27+
}
28+
}
29+
30+
public class ScrollViewerExt: ScrollViewer
31+
{
32+
protected override void OnMouseWheel(MouseWheelEventArgs e)
33+
{
34+
// To restrict scroll action on chart
35+
if (e.Source is SfChart)
36+
return;
37+
38+
base.OnMouseWheel(e);
39+
}
40+
}
41+
}

‎Zoom_WPF_Chart_Inside_ScrollViewer/Properties/AssemblyInfo.cs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
using System.Reflection;
2+
using System.Resources;
3+
using System.Runtime.CompilerServices;
4+
using System.Runtime.InteropServices;
5+
using System.Windows;
6+
7+
// General Information about an assembly is controlled through the following
8+
// set of attributes. Change these attribute values to modify the information
9+
// associated with an assembly.
10+
[assembly: AssemblyTitle("Zoom_WPF_Chart_Inside_ScrollViewer")]
11+
[assembly: AssemblyDescription("")]
12+
[assembly: AssemblyConfiguration("")]
13+
[assembly: AssemblyCompany("")]
14+
[assembly: AssemblyProduct("Zoom_WPF_Chart_Inside_ScrollViewer")]
15+
[assembly: AssemblyCopyright("Copyright © 2023")]
16+
[assembly: AssemblyTrademark("")]
17+
[assembly: AssemblyCulture("")]
18+
19+
// Setting ComVisible to false makes the types in this assembly not visible
20+
// to COM components. If you need to access a type in this assembly from
21+
// COM, set the ComVisible attribute to true on that type.
22+
[assembly: ComVisible(false)]
23+
24+
//In order to begin building localizable applications, set
25+
//<UICulture>CultureYouAreCodingWith</UICulture> in your .csproj file
26+
//inside a <PropertyGroup>. For example, if you are using US english
27+
//in your source files, set the <UICulture> to en-US. Then uncomment
28+
//the NeutralResourceLanguage attribute below. Update the "en-US" in
29+
//the line below to match the UICulture setting in the project file.
30+
31+
//[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
32+
33+
34+
[assembly: ThemeInfo(
35+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
36+
//(used if a resource is not found in the page,
37+
// or application resource dictionaries)
38+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
39+
//(used if a resource is not found in the page,
40+
// app, or any theme specific resource dictionaries)
41+
)]
42+
43+
44+
// Version information for an assembly consists of the following four values:
45+
//
46+
// Major Version
47+
// Minor Version
48+
// Build Number
49+
// Revision
50+
//
51+
// You can specify all the values or you can default the Build and Revision Numbers
52+
// by using the '*' as shown below:
53+
// [assembly: AssemblyVersion("1.0.*")]
54+
[assembly: AssemblyVersion("1.0.0.0")]
55+
[assembly: AssemblyFileVersion("1.0.0.0")]

‎Zoom_WPF_Chart_Inside_ScrollViewer/Properties/Resources.Designer.cs‎

Lines changed: 71 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)