Updated the trackball sample

README.md

@@ -1,2 +1,19 @@
-# How-to-synchronize-the-trackball-with-different-chart-area-in-WPF-Chart
-This article shows how to synchronize the trackball with different chart area in WPF Chart
+# How to synchronize the trackball in multiple WPF Charts
+This article explains how to synchronize the Trackball in multiple WPF Charts using Syncfusion's SfChart control. Synchronizing the Trackball across multiple charts allows users to view related data points in different charts simultaneously, enhancing the data analysis experience. This is particularly useful when dealing with comparative data spread across multiple series or charts, as it provides a unified interaction mechanism.
+
+# SFChart
+
+The SfChart is a powerful and flexible charting library designed to render high-performance charts with a wide variety of customizable features. It supports multiple chart types, including Line, Bar, Area, and more, making it an excellent tool for visualizing complex datasets.
+
+ # Trackball 
+
+The TrackballBehavior is a useful feature in the SfChart that enables users to display interactive data tooltips when hovering over a chart. It provides detailed information about data points, such as their X and Y values, and can be customized to display additional content as required.
+
+# Output
+![Synchronize trackballs](https://github.com/user-attachments/assets/3e401e8c-b56c-4de5-a6ae-c13c20af52f9)
+
+
+# Troubleshooting
+If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
+
+For a step by step procedure, refer to the [Synchronize trackball]() KB article.

Synchronize_Trackball/App.xaml

@@ -0,0 +1,9 @@
+<Application x:Class="Synchronize_Trackball.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:Synchronize_Trackball"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+
+    </Application.Resources>
+</Application>

Synchronize_Trackball/App.xaml.cs

@@ -0,0 +1,14 @@
+using System.Configuration;
+using System.Data;
+using System.Windows;
+
+namespace Synchronize_Trackball
+{
+    /// <summary>
+    /// Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+
+}

Synchronize_Trackball/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)
+)]

Synchronize_Trackball/MainWindow.xaml

@@ -0,0 +1,57 @@
+<Window x:Class="Synchronize_Trackball.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:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
+        xmlns:local="clr-namespace:Synchronize_Trackball"
+        mc:Ignorable="d"
+        Title="MainWindow" Height="450" Width="800">
+    <Grid>
+        <Grid.DataContext>
+            <local:DataGenerator/>
+        </Grid.DataContext>
+
+        <Grid.RowDefinitions>
+            <RowDefinition />
+            <RowDefinition />
+        </Grid.RowDefinitions>
+
+        <chart:SfChart x:Name="chart1" MouseMove="SfChart_MouseMove1" Header="FirstChart" Margin="5">
+
+            <chart:SfChart.Behaviors>
+                <local:CustomTrackBallBehavior x:Name="behavior1"/>
+            </chart:SfChart.Behaviors>
+
+            <chart:SfChart.PrimaryAxis>
+                <chart:DateTimeAxis ShowTrackBallInfo="True" x:Name="axis" LabelFormat="MMM-dd"  />
+            </chart:SfChart.PrimaryAxis>
+
+            <chart:SfChart.SecondaryAxis>
+                <chart:NumericalAxis ShowTrackBallInfo="True" x:Name="secAxis"/>
+            </chart:SfChart.SecondaryAxis>
+
+            <chart:FastLineSeries x:Name="series1" XBindingPath="Date" YBindingPath="Value"
+                           ItemsSource="{Binding DataCollection1}"/>
+
+        </chart:SfChart>
+
+        <chart:SfChart x:Name="chart2" MouseMove="SfChart_MouseMove2" Grid.Row="1" Grid.Column="0" Header="Second Chart" Margin="5">
+
+            <chart:SfChart.Behaviors>
+                <local:CustomTrackBallBehavior  x:Name="behavior2"/>
+            </chart:SfChart.Behaviors>
+
+            <chart:SfChart.PrimaryAxis>
+                <chart:DateTimeAxis ShowTrackBallInfo="True" LabelFormat="MMM-dd"/>
+            </chart:SfChart.PrimaryAxis>
+
+            <chart:SfChart.SecondaryAxis>
+                <chart:NumericalAxis ShowTrackBallInfo="True" />
+            </chart:SfChart.SecondaryAxis>
+
+            <chart:FastLineSeries x:Name="series3" XBindingPath="Date" YBindingPath="Value" 
+                           ItemsSource="{Binding DataCollection2}"/>
+        </chart:SfChart>
+    </Grid>
+</Window>

Synchronize_Trackball/MainWindow.xaml.cs

@@ -0,0 +1,92 @@
+using System.Collections.ObjectModel;
+using Syncfusion.UI.Xaml.Charts;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Synchronize_Trackball
+{
+    /// <summary>
+    /// Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        public Point MousePoint
+        {
+            get;
+            set;
+        }
+
+        public MainWindow()
+        {
+            InitializeComponent();
+        }
+
+        private void SfChart_MouseMove1(object sender, MouseEventArgs e)
+        {
+            // Taking the first chart position as reference to get the mouse point.
+            MousePoint = Mouse.GetPosition(behavior1.AdorningCanvas);
+            var chart1 = (sender as SfChart);
+
+            if (chart1.SeriesClipRect.Contains(MousePoint))
+            {
+                // Generalizing position with respect to axis width.
+                MousePoint = new Point(
+                MousePoint.X - chart1.SeriesClipRect.Left,
+                MousePoint.Y - chart1.SeriesClipRect.Top);
+
+                behavior1.ActivateTrackball(MousePoint);
+                behavior2.ActivateTrackball(MousePoint);
+            }
+            else
+            {
+                behavior1.DeactivateTrackball();
+                behavior2.DeactivateTrackball();
+            }
+        }
+
+        private void SfChart_MouseMove2(object sender, MouseEventArgs e)
+        {
+            // Taking the second chart position as reference to get the mouse point.
+            MousePoint = Mouse.GetPosition(behavior2.AdorningCanvas);
+            var chart2 = (sender as SfChart);
+
+            if (chart2.SeriesClipRect.Contains(MousePoint))
+            {
+                // Generalizing position with respect to axis width.
+                MousePoint = new Point(
+                MousePoint.X - chart2.SeriesClipRect.Left,
+                MousePoint.Y - chart2.SeriesClipRect.Top);
+
+                behavior1.ActivateTrackball(MousePoint);
+                behavior2.ActivateTrackball(MousePoint);
+            }
+            else
+            {
+                behavior1.DeactivateTrackball();
+                behavior2.DeactivateTrackball();
+            }
+        }
+    }
+
+    public class CustomTrackBallBehavior : ChartTrackBallBehavior
+    {
+        public void ActivateTrackball(Point mousePoint)
+        {
+            IsActivated = true;
+            OnPointerPositionChanged(mousePoint);
+        }
+
+        public void DeactivateTrackball()
+        {
+            IsActivated = false;
+        }
+    }
+}

Synchronize_Trackball/Model/Data.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Synchronize_Trackball
+{
+    public class Data
+    {
+        public Data(DateTime date, double value)
+        {
+            Date = date;
+            Value = value;
+        }
+
+        public DateTime Date
+        {
+            get;
+            set;
+        }
+
+        public double Value
+        {
+            get;
+            set;
+        }
+    }
+}

Synchronize_Trackball/Synchronize_Trackball.csproj

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net8.0-windows</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <UseWPF>true</UseWPF>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
+  </ItemGroup>
+
+</Project>

Synchronize_Trackball/Synchronize_Trackball.sln

@@ -0,0 +1,22 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.12.35506.116 d17.12
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Synchronize_Trackball", "Synchronize_Trackball.csproj", "{2AE8056D-FC80-4398-A603-35E59086C4CA}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal

Synchronize_Trackball/ViewModel/DataGenerator.cs

@@ -0,0 +1,49 @@
+using Synchronize_Trackball;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Synchronize_Trackball
+{
+    public class DataGenerator
+    {
+        public int DataCount = 100;
+        private Random randomNumber;
+        public ObservableCollection<Data> DataCollection1 { get; set; }
+        public ObservableCollection<Data> DataCollection2 { get; set; }
+
+        public DataGenerator()
+        {
+            randomNumber = new Random();
+            DataCollection1 = GenerateData();
+            DataCollection2 = GenerateData();
+        }
+
+        public ObservableCollection<Data> GenerateData()
+        {
+            ObservableCollection<Data> datas = new ObservableCollection<Data>();
+            DateTime date = new DateTime(2020, 1, 1);
+            double value = 100;
+
+            for (int i = 0; i < DataCount; i++)
+            {
+                datas.Add(new Data(date, Math.Round(value, 2)));
+                date = date.Add(TimeSpan.FromDays(1));
+
+                if (randomNumber.NextDouble() > .5)
+                {
+                    value += randomNumber.NextDouble();
+                }
+                else
+                {
+                    value -= randomNumber.NextDouble();
+                }
+            }
+
+            return datas;
+        }
+    }
+}