Merge pull request #1 from SyncfusionExamples/WPF-925798-SyncPanningC…

…hart Created the Synchronize panning sample in WPF chart
SyncfusionExamples · Dec 14, 2024 · b80e65d · b80e65d
2 parents dd25e9c + 562e292
commit b80e65d
Show file tree

Hide file tree

Showing 11 changed files with 415 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,137 @@
-# How-to-Synchronize-Panning-in-Multiple-WPF-Charts.
-This article explains how to synchronize panning in multiple WPF charts with step-by-step guidance.
+# How-to-Synchronize-Panning-in-Multiple-WPF-Charts
+
+Synchronizing panning across multiple charts in a WPF application can enhance the user experience by allowing users to view related data simultaneously. This article outlines the steps to achieve synchronized panning in [Syncfusion WPF SfCharts](https://www.syncfusion.com/wpf-controls/charts).
+
+## Steps to achieve Synchronized Panning in Multiple Charts
+
+1. Set Up Multiple Charts
+
+Let’s configure the Syncfusion WPF Chart control using this [getting started documentation](https://help.syncfusion.com/wpf/charts/getting-started). Refer to the following code example to create multiple charts in your application.
+
+
+ ```
+<Grid>
+. . . .
+     <syncfusion:SfChart x:Name="StepLineChart" Grid.Row="0">
+             <syncfusion:SfChart.PrimaryAxis>
+                 <syncfusion:NumericalAxis />
+             </syncfusion:SfChart.PrimaryAxis>
+             <syncfusion:SfChart.SecondaryAxis>
+                 <syncfusion:NumericalAxis />
+             </syncfusion:SfChart.SecondaryAxis>
+         <syncfusion:StepLineSeries ItemsSource="{Binding StepLineChartData}" 
+                                    XBindingPath="X" 
+                                    YBindingPath="Y"
+                                    Interior="#9013FE" />
+     </syncfusion:SfChart>
+
+     <syncfusion:SfChart x:Name="AreaChart" Grid.Row="1">
+             <syncfusion:SfChart.PrimaryAxis>
+                 <syncfusion:NumericalAxis />
+             </syncfusion:SfChart.PrimaryAxis>
+             <syncfusion:SfChart.SecondaryAxis>
+                 <syncfusion:NumericalAxis/>
+             </syncfusion:SfChart.SecondaryAxis>
+         <syncfusion:AreaSeries ItemsSource="{Binding AreaChartData}" 
+                                XBindingPath="X" 
+                                YBindingPath="Y" 
+                                StrokeThickness="20"
+                                Interior="#FFB6C1" />
+     </syncfusion:SfChart>
+
+     <syncfusion:SfChart x:Name="SplineChart" Grid.Row="2">
+             <syncfusion:SfChart.PrimaryAxis>
+                 <syncfusion:NumericalAxis/>
+             </syncfusion:SfChart.PrimaryAxis>
+             <syncfusion:SfChart.SecondaryAxis>
+                 <syncfusion:NumericalAxis />
+             </syncfusion:SfChart.SecondaryAxis>
+         <syncfusion:SplineSeries ItemsSource="{Binding SplineChartData}" 
+                                  XBindingPath="X" 
+                                  YBindingPath="Y" 
+                                  Interior="#8BC34A" />
+     </syncfusion:SfChart>
+. . . .
+ </Grid> 
+ ```
+
+
+2. Enable Zoom Pan behavior for each Chart
+
+The panning feature enables moving the visible area of the chart when zoomed in. To activate panning, set the [**EnablePanning**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartZoomPanBehavior.html#Syncfusion_UI_Xaml_Charts_ChartZoomPanBehavior_EnablePanning) property to true.
+
+
+ ```
+<syncfusion:SfChart>
+. . . 
+
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
+    </syncfusion:SfChart.Behaviors>
+
+. . .
+</syncfusion:SfChart> 
+ ```
+
+
+3.	Handle the Zooming and Panning changed events
+
+This event tracks the changes in the visible area and update the viewports of other charts to match the new range.
+
+[XAML]
+
+ ```
+<syncfusion:SfChart ZoomChanging="Chart_ZoomChanging" PanChanging="Chart_PanChanging">
+. . . 
+
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
+    </syncfusion:SfChart.Behaviors>
+
+. . .
+</syncfusion:SfChart> 
+ ```
+
+[C#]
+
+ ```
+private void Chart_ZoomChanging(object sender, ZoomChangingEventArgs e)
+{
+    SfChart sourceChart = (SfChart)sender;
+    foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
+    {
+        if (chart != sourceChart)
+        {
+            chart.PrimaryAxis.ZoomFactor = e.CurrentFactor;
+            chart.PrimaryAxis.ZoomPosition = e.CurrentPosition;
+        }
+    }
+}
+
+private void Chart_PanChanging(object sender, PanChangingEventArgs e)
+{
+    SfChart sourceChart = (SfChart)sender;
+    foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
+    {
+        if (chart != sourceChart)
+        {
+            chart.PrimaryAxis.ZoomPosition = e.NewZoomPosition;
+            chart.PrimaryAxis.ZoomFactor = e.Axis.ZoomFactor;
+        }
+    }
+}
+  ```
+
+## Output  
+
+The following demo video illustrates multiple Charts in WPF with synchronized panning, showing how the visible areas of the charts move together when panning is performed on any one chart, following the implemented synchronization steps.
+
+ ![Synchronize_Panning_in_WPF_Multiple_Charts_Converted.gif](https://support.syncfusion.com/kb/agent/attachment/article/18329/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0MDU2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.FobbwZhJqvlfBurJe9ctvqCVvSEnFHXKQrZVGVybq2I)
+
+## Troubleshooting
+
+#### Path too long exception
+
+If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
+
+For more details, refer to the KB on [how to synchronize panning in WPF chart control?](https://support.syncfusion.com/kb/article/18329/how-to-synchronize-panning-in-wpf-charts).
diff --git a/SynchronizePanningSampleWPF/App.xaml b/SynchronizePanningSampleWPF/App.xaml
@@ -0,0 +1,9 @@
+<Application x:Class="SynchronizePanningSampleWPF.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:SynchronizePanningSampleWPF"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+
+    </Application.Resources>
+</Application>
diff --git a/SynchronizePanningSampleWPF/App.xaml.cs b/SynchronizePanningSampleWPF/App.xaml.cs
@@ -0,0 +1,14 @@
+using System.Configuration;
+using System.Data;
+using System.Windows;
+
+namespace SynchronizePanningSampleWPF
+{
+    /// <summary>
+    /// Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+
+}
diff --git a/SynchronizePanningSampleWPF/AssemblyInfo.cs b/SynchronizePanningSampleWPF/AssemblyInfo.cs
@@ -0,0 +1,10 @@
+using System.Windows;
+
+[assembly: ThemeInfo(
+    ResourceDictionaryLocation.None,            //where theme specific resource dictionaries are located
+                                                //(used if a resource is not found in the page,
+                                                // or application resource dictionaries)
+    ResourceDictionaryLocation.SourceAssembly   //where the generic resource dictionary is located
+                                                //(used if a resource is not found in the page,
+                                                // app, or any theme specific resource dictionaries)
+)]
diff --git a/SynchronizePanningSampleWPF/MainWindow.xaml b/SynchronizePanningSampleWPF/MainWindow.xaml
@@ -0,0 +1,73 @@
+<Window x:Class="SynchronizePanningSampleWPF.MainWindow"
+        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
+        xmlns:local="clr-namespace:SynchronizePanningSampleWPF"
+        mc:Ignorable="d"
+        Title="MainWindow" Height="450" Width="800">
+
+    <Window.DataContext>
+        <local:ChartViewModel/>
+    </Window.DataContext>
+
+    <Border Margin="20" Padding="7" BorderThickness="2" BorderBrush="LightGray" CornerRadius="10">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <syncfusion:SfChart x:Name="StepLineChart" Margin="10" Grid.Row="0" ZoomChanging="Chart_ZoomChanging" PanChanging="Chart_PanChanging">
+                <syncfusion:SfChart.PrimaryAxis>
+                    <syncfusion:NumericalAxis />
+                </syncfusion:SfChart.PrimaryAxis>
+                <syncfusion:SfChart.SecondaryAxis>
+                    <syncfusion:NumericalAxis />
+                </syncfusion:SfChart.SecondaryAxis>
+                <syncfusion:StepLineSeries ItemsSource="{Binding StepLineChartData}" 
+                                           XBindingPath="X" 
+                                           YBindingPath="Y" 
+                                           Interior="#9013FE" />
+                <syncfusion:SfChart.Behaviors>
+                    <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
+                </syncfusion:SfChart.Behaviors>
+            </syncfusion:SfChart>
+
+            <syncfusion:SfChart x:Name="AreaChart" Grid.Row="1" Margin="10" ZoomChanging="Chart_ZoomChanging" PanChanging="Chart_PanChanging">
+                <syncfusion:SfChart.PrimaryAxis>
+                    <syncfusion:NumericalAxis/>
+                </syncfusion:SfChart.PrimaryAxis>
+                <syncfusion:SfChart.SecondaryAxis>
+                    <syncfusion:NumericalAxis/>
+                </syncfusion:SfChart.SecondaryAxis>
+                <syncfusion:AreaSeries ItemsSource="{Binding AreaChartData}" 
+                                       XBindingPath="X" 
+                                       YBindingPath="Y" 
+                                       StrokeThickness="20"
+                                       Interior="#FFB6C1" />
+                <syncfusion:SfChart.Behaviors>
+                    <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
+                </syncfusion:SfChart.Behaviors>
+            </syncfusion:SfChart>
+
+            <syncfusion:SfChart x:Name="SplineChart" Grid.Row="2" Margin="10" ZoomChanging="Chart_ZoomChanging" PanChanging="Chart_PanChanging">
+                <syncfusion:SfChart.PrimaryAxis>
+                    <syncfusion:NumericalAxis/>
+                </syncfusion:SfChart.PrimaryAxis>
+                <syncfusion:SfChart.SecondaryAxis>
+                    <syncfusion:NumericalAxis />
+                </syncfusion:SfChart.SecondaryAxis>
+                <syncfusion:SplineSeries ItemsSource="{Binding SplineChartData}" 
+                                         XBindingPath="X" 
+                                         YBindingPath="Y" 
+                                         Interior="#8BC34A" />
+                <syncfusion:SfChart.Behaviors>
+                    <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
+                </syncfusion:SfChart.Behaviors>
+            </syncfusion:SfChart>
+        </Grid>
+    </Border>
+</Window>
diff --git a/SynchronizePanningSampleWPF/MainWindow.xaml.cs b/SynchronizePanningSampleWPF/MainWindow.xaml.cs
@@ -0,0 +1,39 @@
+namespace SynchronizePanningSampleWPF
+{
+    using Syncfusion.UI.Xaml.Charts;
+    using System.Windows;
+
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        private void Chart_ZoomChanging(object sender, ZoomChangingEventArgs e)
+        {
+            SfChart sourceChart = (SfChart)sender;
+            foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
+            {
+                if (chart != sourceChart)
+                {
+                    chart.PrimaryAxis.ZoomFactor = e.CurrentFactor;
+                    chart.PrimaryAxis.ZoomPosition = e.CurrentPosition;
+                }
+            }
+        }
+
+        private void Chart_PanChanging(object sender, PanChangingEventArgs e)
+        {
+            SfChart sourceChart = (SfChart)sender;
+            foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
+            {
+                if (chart != sourceChart)
+                {
+                    chart.PrimaryAxis.ZoomPosition = e.NewZoomPosition;
+                    chart.PrimaryAxis.ZoomFactor = e.Axis.ZoomFactor;
+                }
+            }
+        }
+    }
+}
diff --git a/SynchronizePanningSampleWPF/Model/ChartData.cs b/SynchronizePanningSampleWPF/Model/ChartData.cs
@@ -0,0 +1,8 @@
+namespace SynchronizePanningSampleWPF
+{
+    public class ChartData
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+    }
+}
diff --git a/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.csproj b/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.csproj
@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net9.0-windows</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <UseWPF>true</UseWPF>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
+  </ItemGroup>
+
+</Project>
diff --git a/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.csproj.user b/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.csproj.user
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup />
+  <ItemGroup>
+    <ApplicationDefinition Update="App.xaml">
+      <SubType>Designer</SubType>
+    </ApplicationDefinition>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="MainWindow.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
+</Project>
diff --git a/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.sln b/SynchronizePanningSampleWPF/SynchronizePanningSampleWPF.sln
@@ -0,0 +1,22 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.12.35527.113
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SynchronizePanningSampleWPF", "SynchronizePanningSampleWPF.csproj", "{D887EC71-A5D6-4E0D-8101-88381C2F01B8}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{D887EC71-A5D6-4E0D-8101-88381C2F01B8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D887EC71-A5D6-4E0D-8101-88381C2F01B8}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D887EC71-A5D6-4E0D-8101-88381C2F01B8}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D887EC71-A5D6-4E0D-8101-88381C2F01B8}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal