From ffbebacc59a78e1dcd21334d56399ecce227f692 Mon Sep 17 00:00:00 2001
From: ArunKumarSF4054 <arunkumar.sivakumar@syncfusion.com>
Date: Fri, 30 Aug 2024 12:41:28 +0530
Subject: [PATCH] WPF-900304_Customize Port hover effect sample

---
 .../PortsSample/PortsSample/App.config        |   6 +
 .../PortsSample/PortsSample/App.xaml          |   9 +
 .../PortsSample/PortsSample/App.xaml.cs       |  17 ++
 .../PortsSample/PortsSample/MainWindow.xaml   | 174 +++++++++++++++++
 .../PortsSample/MainWindow.xaml.cs            | 178 ++++++++++++++++++
 .../PortsSample/PortsSample_462.csproj        | 103 ++++++++++
 .../PortsSample/PortsSample_462.sln           |  25 +++
 .../PortsSample/PortsSample_60.csproj         | 104 ++++++++++
 .../PortsSample/PortsSample_60.sln            |  24 +++
 .../PortsSample/PortsSample_80.csproj         | 105 +++++++++++
 .../PortsSample/PortsSample_80.sln            |  24 +++
 .../PortsSample/Properties/AssemblyInfo.cs    |  55 ++++++
 .../Properties/Resources.Designer.cs          |  63 +++++++
 .../PortsSample/Properties/Resources.resx     | 117 ++++++++++++
 .../Properties/Settings.Designer.cs           |  26 +++
 .../PortsSample/Properties/Settings.settings  |   7 +
 .../README.md                                 |  13 ++
 17 files changed, 1050 insertions(+)
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.config
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml.cs
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml.cs
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.csproj
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.sln
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.csproj
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.sln
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.csproj
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.sln
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/AssemblyInfo.cs
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.Designer.cs
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.resx
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.Designer.cs
 create mode 100644 Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.settings
 create mode 100644 Samples/Port/How to customize port-hover-effect/README.md

diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.config b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.config
new file mode 100644
index 00000000..8d234373
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.config	
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <startup> 
+        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.2"/>
+    </startup>
+</configuration>
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml
new file mode 100644
index 00000000..1ea8d9c1
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml	
@@ -0,0 +1,9 @@
+<Application x:Class="PortsSample.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:PortsSample"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+         
+    </Application.Resources>
+</Application>
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml.cs b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml.cs
new file mode 100644
index 00000000..525cfcad
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/App.xaml.cs	
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Configuration;
+using System.Data;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows;
+
+namespace PortsSample
+{
+    /// <summary>
+    /// Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+}
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml
new file mode 100644
index 00000000..c27c0690
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml	
@@ -0,0 +1,174 @@
+<Window x:Class="PortsSample.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:local="clr-namespace:PortsSample"
+        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
+        mc:Ignorable="d"
+        Title="MainWindow" Height="450" Width="800">
+    <Window.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--Dictionary which contains the inbuilt shapes-->
+                <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+
+            
+
+            <Style TargetType="Path" x:Key="RedStyle">
+                <Setter Property="Fill" Value="Red"/>
+                <Setter Property="Stretch" Value="Fill"/>
+            </Style>
+
+            <Style TargetType="Path" x:Key="GreenStyle">
+                <Setter Property="Fill" Value="DarkGreen"/>
+                <Setter Property="Stretch" Value="Fill"/>
+            </Style>
+
+            <Style TargetType="Path" x:Key="BlueStyle">
+                <Setter Property="Fill" Value="DeepSkyBlue"/>
+                <Setter Property="Stretch" Value="Fill"/>
+            </Style>
+
+            <Style TargetType="Path" x:Key="BlackStyle">
+                <Setter Property="Fill" Value="Black"/>
+                <Setter Property="Stretch" Value="Fill"/>
+            </Style>
+
+          
+
+            <Style TargetType="Path" x:Key="BlueTargetStyle">
+                <Setter Property="Fill" Value="DeepSkyBlue"/>
+                <Setter Property="StrokeThickness" Value="1"/>
+            </Style>
+
+            <Style TargetType="Path" x:Key="BlackTargetStyle">
+                <Setter Property="Fill" Value="Black"/>
+                <Setter Property="StrokeThickness" Value="1"/>
+            </Style>
+
+            <Style TargetType="Path" x:Key="LightRedTargetStyle">
+                <Setter Property="Fill" Value="Red"/>
+                <Setter Property="StrokeThickness" Value="1"/>
+            </Style>
+
+            <Style TargetType="syncfusion:Node">
+                <Setter Property="ShapeStyle">
+                    <Setter.Value>
+                        <Style TargetType="Path">
+                            <Setter Property="Fill" Value="#FF5B9BD5"/>
+                            <Setter Property="Stretch" Value="Fill"/>
+                            <Setter Property="Stroke" Value="#FFEDF1F6 "/>
+                        </Style>
+                    </Setter.Value>
+                </Setter>
+            </Style>
+            
+            
+            
+            <Style TargetType="syncfusion:RunTimeConnectionIndicator">
+                <Setter Property="Width" Value="100" />
+                <Setter Property="Height" Value="100" />
+                <Style.Triggers>
+                    <Trigger Property="PortHoverEffect" Value="Ripple">
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="syncfusion:RunTimeConnectionIndicator">
+                                    <Grid>
+                                        <Viewbox x:Name="PART_Ripple" Width="55" Height="55" Visibility="Visible">
+                                            <Grid x:Name="LayoutRoot">
+                                                <Path x:Name="_4" Data="F1M30,15C30,23.284,23.284,30,15,30C6.716,30,0,23.284,0,15C0,6.716,6.716,0,15,0C23.284,0,30,6.716,30,15" 
+                       Fill="Red" Height="30" Opacity="0.25" Stretch="Fill" Width="30" 
+                       HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
+                                                    <Path.RenderTransform>
+                                                        <TransformGroup>
+                                                            <ScaleTransform/>
+                                                            <SkewTransform/>
+                                                            <RotateTransform/>
+                                                            <TranslateTransform/>
+                                                        </TransformGroup>
+                                                    </Path.RenderTransform>
+                                                </Path>
+                                            </Grid>
+                                        </Viewbox>
+                                        <VisualStateManager.VisualStateGroups>
+                                            <VisualStateGroup x:Name="connectionIndication">
+                                                <VisualState x:Name="Connecting">
+                                                    <Storyboard RepeatBehavior="Forever">
+                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="_4">
+                                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="_4">
+                                                            <EasingDoubleKeyFrame KeyTime="0" Value="-0.333"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-0.5"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-0.667"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-0.834"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-1.001"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="-1.201"/>
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="_4">
+                                                            <EasingDoubleKeyFrame KeyTime="0" Value="0.333"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.667"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.834"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.01"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="1.201"/>
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="_4">
+                                                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="_4">
+                                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.80"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.60"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.20"/>
+                                                            <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
+                                                        </DoubleAnimationUsingKeyFrames>
+                                                    </Storyboard>
+                                                </VisualState>
+                                                <VisualState x:Name="Normal">
+                                                    <Storyboard />
+                                                </VisualState>
+                                            </VisualStateGroup>
+                                        </VisualStateManager.VisualStateGroups>
+                                    </Grid>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Trigger>
+                </Style.Triggers>
+
+            </Style>
+        </ResourceDictionary>
+    </Window.Resources>
+
+    
+    <Grid>
+        <syncfusion:SfDiagram x:Name="diagram" PortHoverEffect="Ripple" >
+            <syncfusion:SfDiagram.Nodes>
+                <syncfusion:NodeCollection>
+                    
+                </syncfusion:NodeCollection>
+            </syncfusion:SfDiagram.Nodes>
+
+            <syncfusion:SfDiagram.Connectors>
+                <syncfusion:ConnectorCollection>
+                    
+                </syncfusion:ConnectorCollection>
+            </syncfusion:SfDiagram.Connectors>
+        </syncfusion:SfDiagram>
+        
+    </Grid>
+</Window>
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml.cs b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml.cs
new file mode 100644
index 00000000..a181a9b2
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/MainWindow.xaml.cs	
@@ -0,0 +1,178 @@
+using Syncfusion.UI.Xaml.Diagram;
+using Syncfusion.UI.Xaml.Diagram.Controls;
+using Syncfusion.UI.Xaml.Diagram.Serializer;
+using Syncfusion.UI.Xaml.Diagram.Utility;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Data;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+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;
+using System.Xml.Linq;
+using Node = Syncfusion.UI.Xaml.Diagram.Node;
+
+namespace PortsSample
+{
+    /// <summary>
+    /// Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+            diagram.Constraints = GraphConstraints.Default | GraphConstraints.Bridging;
+           
+            NodeViewModel node = new NodeViewModel()
+            {
+                OffsetX = 300,
+                OffsetY = 200,
+                UnitHeight = 100,
+                UnitWidth = 150,
+                Shape = this.Resources["Rectangle"],
+                Annotations = new ObservableCollection<IAnnotation>()
+                {
+                    //Initialize the Annotation with content
+                    new AnnotationEditorViewModel()
+                    {
+                        Content="Source node"
+                    }
+                }
+            };
+            
+
+            NodePortViewModel nodePort = new NodePortViewModel()
+            {
+                ID= "nodePort",
+                NodeOffsetX = 0,
+                NodeOffsetY = 0.5,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["RedStyle"] as Style,
+            };
+            NodePortViewModel nodePort1 = new NodePortViewModel()
+            {
+                ID = "nodePort1",
+                NodeOffsetX = 0.5,
+                NodeOffsetY = 0,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["GreenStyle"] as Style,
+            };
+            NodePortViewModel nodePort2 = new NodePortViewModel()
+            {
+                ID = "nodePort2",
+                NodeOffsetX = 0.5,
+                NodeOffsetY = 1,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["BlackStyle"] as Style,
+            };
+            NodePortViewModel nodePort3 = new NodePortViewModel()
+            {
+                ID = "nodePort3",
+                NodeOffsetX = 1,
+                NodeOffsetY = 0.5,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["BlueStyle"] as Style,
+            };
+
+            
+            (node.Ports as PortCollection).Add(nodePort);
+            (node.Ports as PortCollection).Add(nodePort1);
+            (node.Ports as PortCollection).Add(nodePort2);
+            (node.Ports as PortCollection).Add(nodePort3);
+           
+            (diagram.Nodes as NodeCollection).Add(node);
+
+           
+
+            NodeViewModel node2 = new NodeViewModel()
+            {
+                ID = "Node2",
+                OffsetX = 700,
+                OffsetY = 300,
+                UnitHeight = 100,
+                UnitWidth = 150,
+                Shape = this.Resources["Rectangle"],
+                Annotations = new ObservableCollection<IAnnotation>()
+                {
+                    //Initialize the Annotation with content
+                    new AnnotationEditorViewModel()
+                    {
+                        Content="Target Node"
+                    }
+                }
+            };
+            
+            NodePortViewModel Port = new NodePortViewModel()
+            {
+                ID= "Port",
+                NodeOffsetX = 0,
+                NodeOffsetY = 0.5,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["RedStyle"] as Style,
+            };
+            NodePortViewModel Port1 = new NodePortViewModel()
+            {
+                ID="Port1",
+                NodeOffsetX = 0.5,
+                NodeOffsetY = 0,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["GreenStyle"] as Style,
+            };
+           
+            NodePortViewModel Port2 = new NodePortViewModel()
+            {
+                ID="Port2",
+                NodeOffsetX = 0.5,
+                NodeOffsetY = 1,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["BlackStyle"] as Style,
+            };
+            NodePortViewModel Port3 = new NodePortViewModel()
+            {
+                ID="Port3",
+                NodeOffsetX = 1,
+                NodeOffsetY = 0.5,
+                UnitHeight = 10,
+                UnitWidth = 10,
+                Shape = this.Resources["Ellipse"],
+                ShapeStyle = this.Resources["BlueStyle"] as Style,
+            };
+            
+
+            (node2.Ports as PortCollection).Add(Port);
+            (node2.Ports as PortCollection).Add(Port1);
+            (node2.Ports as PortCollection).Add(Port2);
+            (node2.Ports as PortCollection).Add(Port3);
+            (diagram.Nodes as NodeCollection).Add(node2);
+
+            
+
+        }
+
+       
+    }
+}
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.csproj b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.csproj
new file mode 100644
index 00000000..19168c2c
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.csproj	
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
+    <ProjectGuid>{BC7DB42A-176F-4831-853D-0F237C7A5C43}</ProjectGuid>
+    <OutputType>WinExe</OutputType>
+    <RootNamespace>PortsSample</RootNamespace>
+    <AssemblyName>PortsSample</AssemblyName>
+    <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
+    <FileAlignment>512</FileAlignment>
+    <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
+    <WarningLevel>4</WarningLevel>
+    <AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects>
+    <Deterministic>true</Deterministic>
+    <TargetFrameworkProfile />
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <PlatformTarget>AnyCPU</PlatformTarget>
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <Optimize>false</Optimize>
+    <OutputPath>bin\Debug\</OutputPath>
+    <DefineConstants>DEBUG;TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+    <PlatformTarget>AnyCPU</PlatformTarget>
+    <DebugType>pdbonly</DebugType>
+    <Optimize>true</Optimize>
+    <OutputPath>bin\Release\</OutputPath>
+    <DefineConstants>TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="System" />
+    <Reference Include="System.Data" />
+    <Reference Include="System.Xml" />
+    <Reference Include="Microsoft.CSharp" />
+    <Reference Include="System.Core" />
+    <Reference Include="System.Xml.Linq" />
+    <Reference Include="System.Data.DataSetExtensions" />
+    <Reference Include="System.Net.Http" />
+    <Reference Include="System.Xaml">
+      <RequiredTargetFramework>4.0</RequiredTargetFramework>
+    </Reference>
+    <Reference Include="WindowsBase" />
+    <Reference Include="PresentationCore" />
+    <Reference Include="PresentationFramework" />
+  </ItemGroup>
+  <ItemGroup>
+    <ApplicationDefinition Include="App.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </ApplicationDefinition>
+    <Page Include="MainWindow.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Compile Include="App.xaml.cs">
+      <DependentUpon>App.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="MainWindow.xaml.cs">
+      <DependentUpon>MainWindow.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="Properties\AssemblyInfo.cs">
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="Properties\Resources.Designer.cs">
+      <AutoGen>True</AutoGen>
+      <DesignTime>True</DesignTime>
+      <DependentUpon>Resources.resx</DependentUpon>
+    </Compile>
+    <Compile Include="Properties\Settings.Designer.cs">
+      <AutoGen>True</AutoGen>
+      <DependentUpon>Settings.settings</DependentUpon>
+      <DesignTimeSharedInput>True</DesignTimeSharedInput>
+    </Compile>
+    <EmbeddedResource Include="Properties\Resources.resx">
+      <Generator>ResXFileCodeGenerator</Generator>
+      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
+    </EmbeddedResource>
+    <None Include="packages.config" />
+    <None Include="Properties\Settings.settings">
+      <Generator>SettingsSingleFileGenerator</Generator>
+      <LastGenOutput>Settings.Designer.cs</LastGenOutput>
+    </None>
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="App.config" />
+    <PackageReference Include="Syncfusion.Licensing" Version="*" />
+    <PackageReference Include="Syncfusion.SfDiagram.WPF" Version="*" />
+    <PackageReference Include="Syncfusion.Shared.WPF" Version="*" />
+  </ItemGroup>
+  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
+</Project>
\ No newline at end of file
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.sln b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.sln
new file mode 100644
index 00000000..b00de6c4
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_462.sln	
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34309.116
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PortsSample_462", "PortsSample_462.csproj", "{BC7DB42A-176F-4831-853D-0F237C7A5C43}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {71CE9D5D-3748-479E-B861-7BC2869C172C}
+	EndGlobalSection
+EndGlobal
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.csproj b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.csproj
new file mode 100644
index 00000000..0607ad72
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.csproj	
@@ -0,0 +1,104 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net6.0-windows</TargetFramework>
+    <UseWindowsForms>true</UseWindowsForms>
+    <UseWPF>true</UseWPF>
+    <EnableDefaultEmbeddedResourceItems>False</EnableDefaultEmbeddedResourceItems>
+    <EnableDefaultItems>false</EnableDefaultItems>
+    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+    <AssemblyName>PortsSample</AssemblyName>
+    <RootNamespace>PortsSample</RootNamespace>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release-Xml|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Remove="obj\**" />
+    <Compile Remove="obj_45\**" />
+    <Compile Remove="obj_462\**" />
+    <Compile Remove="obj_50\**" />
+    <Compile Remove="obj_60\**" />
+    <Compile Remove="obj_70\**" />
+    <Compile Remove="obj_80\**" />
+    <Compile Remove="obj_90\**" />
+    <EmbeddedResource Remove="obj\**" />
+    <EmbeddedResource Remove="obj_45\**" />
+    <EmbeddedResource Remove="obj_462\**" />
+    <EmbeddedResource Remove="obj_50\**" />
+    <EmbeddedResource Remove="obj_60\**" />
+    <EmbeddedResource Remove="obj_70\**" />
+    <EmbeddedResource Remove="obj_80\**" />
+    <EmbeddedResource Remove="obj_90\**" />
+    <None Remove="obj\**" />
+    <None Remove="obj_45\**" />
+    <None Remove="obj_462\**" />
+    <None Remove="obj_50\**" />
+    <None Remove="obj_60\**" />
+    <None Remove="obj_70\**" />
+    <None Remove="obj_80\**" />
+    <None Remove="obj_90\**" />
+    <Page Remove="obj\**" />
+    <Page Remove="obj_45\**" />
+    <Page Remove="obj_462\**" />
+    <Page Remove="obj_50\**" />
+    <Page Remove="obj_60\**" />
+    <None Remove="obj_70\**" />
+    <None Remove="obj_80\**" />
+    <None Remove="obj_90\**" />
+    <None Remove="Properties\Settings.settings" />
+    <None Include="Properties\Settings.settings" />
+    <None Remove="App.config" />
+    <None Include="App.config" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\.vs\ProjectGeneratorApp\FileContentIndex\0d1d5e25-a1bd-4157-bf36-31bf3d97c945.vsidx" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\.vs\ProjectGeneratorApp\v17\.suo" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ExcludeProject.xml" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.exe" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.exe.config" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.pdb" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\.NETFramework,Version=v4.7.AssemblyAttributes.cs" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.AssemblyReference.cache" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.CopyComplete" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.CoreCompileInputs.cache" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.FileListAbsolute.txt" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.exe" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.pdb" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\Properties\AssemblyInfo.cs" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\App.config" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\Program.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ExcludeProject.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\.NETFramework,Version=v4.7.AssemblyAttributes.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.AssemblyReference.cache" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.CoreCompileInputs.cache" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.FileListAbsolute.txt" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\Properties\AssemblyInfo.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\ExcludeProject.xml" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\ProjectGenerator.cs" />
+    <ApplicationDefinition Include="App.xaml" />
+    <Compile Include="App.xaml.cs" />
+    <Compile Include="MainWindow.xaml.cs" />
+	<PackageReference Include="Syncfusion.Licensing" Version="*" />
+    <PackageReference Include="Syncfusion.SfDiagram.WPF" Version="*" />
+    <PackageReference Include="Syncfusion.Shared.WPF" Version="*" />
+  </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainWindow.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+</Project>
\ No newline at end of file
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.sln b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.sln
new file mode 100644
index 00000000..544bd52d
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_60.sln	
@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.31410.414
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PortsSample_60", "PortsSample_60.csproj", "{BC7DB42A-176F-4831-853D-0F237C7A5C43}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {71CE9D5D-3748-479E-B861-7BC2869C172C}
+	EndGlobalSection
+EndGlobal
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.csproj b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.csproj
new file mode 100644
index 00000000..31d4a004
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.csproj	
@@ -0,0 +1,105 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net8.0-windows</TargetFramework>
+    <UseWindowsForms>true</UseWindowsForms>
+    <UseWPF>true</UseWPF>
+    <EnableDefaultEmbeddedResourceItems>False</EnableDefaultEmbeddedResourceItems>
+    <EnableDefaultItems>false</EnableDefaultItems>
+    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+    <AssemblyName>PortsSample</AssemblyName>
+    <RootNamespace>PortsSample</RootNamespace>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release-Xml|AnyCPU'">
+    <DefineConstants>TRACE;NET50</DefineConstants>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Remove="obj\**" />
+    <Compile Remove="obj_45\**" />
+    <Compile Remove="obj_462\**" />
+    <Compile Remove="obj_50\**" />
+    <Compile Remove="obj_60\**" />
+    <Compile Remove="obj_70\**" />
+    <Compile Remove="obj_80\**" />
+    <Compile Remove="obj_90\**" />
+    <EmbeddedResource Remove="obj\**" />
+    <EmbeddedResource Remove="obj_45\**" />
+    <EmbeddedResource Remove="obj_462\**" />
+    <EmbeddedResource Remove="obj_50\**" />
+    <EmbeddedResource Remove="obj_60\**" />
+    <EmbeddedResource Remove="obj_70\**" />
+    <EmbeddedResource Remove="obj_80\**" />
+    <EmbeddedResource Remove="obj_90\**" />
+    <None Remove="obj\**" />
+    <None Remove="obj_45\**" />
+    <None Remove="obj_462\**" />
+    <None Remove="obj_50\**" />
+    <None Remove="obj_60\**" />
+    <None Remove="obj_70\**" />
+    <None Remove="obj_80\**" />
+    <None Remove="obj_90\**" />
+    <Page Remove="obj\**" />
+    <Page Remove="obj_45\**" />
+    <Page Remove="obj_462\**" />
+    <Page Remove="obj_50\**" />
+    <Page Remove="obj_60\**" />
+    <None Remove="obj_70\**" />
+    <None Remove="obj_80\**" />
+    <None Remove="obj_90\**" />
+    <None Remove="packages.config" />
+    <None Remove="Properties\Settings.settings" />
+    <None Include="Properties\Settings.settings" />
+    <None Remove="App.config" />
+    <None Include="App.config" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\.vs\ProjectGeneratorApp\FileContentIndex\0d1d5e25-a1bd-4157-bf36-31bf3d97c945.vsidx" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\.vs\ProjectGeneratorApp\v17\.suo" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ExcludeProject.xml" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.exe" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.exe.config" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectGeneratorApp.pdb" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\bin\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\.NETFramework,Version=v4.7.AssemblyAttributes.cs" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.AssemblyReference.cache" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.CopyComplete" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.CoreCompileInputs.cache" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.csproj.FileListAbsolute.txt" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.exe" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\obj\Debug\ProjectGeneratorApp.pdb" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\Properties\AssemblyInfo.cs" />
+    <None Remove="projectgenerator\ProjectGeneratorApp\App.config" />
+    <Compile Remove="projectgenerator\ProjectGeneratorApp\Program.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ExcludeProject.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\bin\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\.NETFramework,Version=v4.7.AssemblyAttributes.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.AssemblyReference.cache" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.CoreCompileInputs.cache" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.csproj.FileListAbsolute.txt" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.dll" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\obj\Debug\ProjectorGeneratorLibrary.pdb" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\Properties\AssemblyInfo.cs" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\DocCoreProjTemplate.xml" />
+    <None Remove="projectgenerator\ProjectorGeneratorLibrary\ExcludeProject.xml" />
+    <Compile Remove="projectgenerator\ProjectorGeneratorLibrary\ProjectGenerator.cs" />
+    <ApplicationDefinition Include="App.xaml" />
+    <Compile Include="App.xaml.cs" />
+    <Compile Include="MainWindow.xaml.cs" />
+	<PackageReference Include="Syncfusion.Licensing" Version="*" />
+    <PackageReference Include="Syncfusion.SfDiagram.WPF" Version="*" />
+    <PackageReference Include="Syncfusion.Shared.WPF" Version="*" />
+  </ItemGroup>
+  <ItemGroup>
+    <Page Include="MainWindow.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+</Project>
\ No newline at end of file
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.sln b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.sln
new file mode 100644
index 00000000..7c1beb15
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/PortsSample_80.sln	
@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.226.21692
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PortsSample_80", "PortsSample_80.csproj", "{BC7DB42A-176F-4831-853D-0F237C7A5C43}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BC7DB42A-176F-4831-853D-0F237C7A5C43}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {71CE9D5D-3748-479E-B861-7BC2869C172C}
+	EndGlobalSection
+EndGlobal
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/AssemblyInfo.cs b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/AssemblyInfo.cs
new file mode 100644
index 00000000..5cb4d14e
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/AssemblyInfo.cs	
@@ -0,0 +1,55 @@
+using System.Reflection;
+using System.Resources;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+using System.Windows;
+
+// General Information about an assembly is controlled through the following
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("PortsSample")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("")]
+[assembly: AssemblyProduct("PortsSample")]
+[assembly: AssemblyCopyright("Copyright ©  2024")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Setting ComVisible to false makes the types in this assembly not visible
+// to COM components.  If you need to access a type in this assembly from
+// COM, set the ComVisible attribute to true on that type.
+[assembly: ComVisible(false)]
+
+//In order to begin building localizable applications, set
+//<UICulture>CultureYouAreCodingWith</UICulture> in your .csproj file
+//inside a <PropertyGroup>.  For example, if you are using US english
+//in your source files, set the <UICulture> to en-US.  Then uncomment
+//the NeutralResourceLanguage attribute below.  Update the "en-US" in
+//the line below to match the UICulture setting in the project file.
+
+//[assembly: NeutralResourcesLanguage("en-US", UltimateResourceFallbackLocation.Satellite)]
+
+
+[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)
+)]
+
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.Designer.cs b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.Designer.cs
new file mode 100644
index 00000000..765f7bf3
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.Designer.cs	
@@ -0,0 +1,63 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Runtime Version:4.0.30319.42000
+//
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace PortsSample.Properties {
+    using System;
+    
+    
+    /// <summary>
+    ///   A strongly-typed resource class, for looking up localized strings, etc.
+    /// </summary>
+    // This class was auto-generated by the StronglyTypedResourceBuilder
+    // class via a tool like ResGen or Visual Studio.
+    // To add or remove a member, edit your .ResX file then rerun ResGen
+    // with the /str option, or rebuild your VS project.
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "17.0.0.0")]
+    [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
+    internal class Resources {
+        
+        private static global::System.Resources.ResourceManager resourceMan;
+        
+        private static global::System.Globalization.CultureInfo resourceCulture;
+        
+        [global::System.Diagnostics.CodeAnalysis.SuppressMessageAttribute("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode")]
+        internal Resources() {
+        }
+        
+        /// <summary>
+        ///   Returns the cached ResourceManager instance used by this class.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        internal static global::System.Resources.ResourceManager ResourceManager {
+            get {
+                if (object.ReferenceEquals(resourceMan, null)) {
+                    global::System.Resources.ResourceManager temp = new global::System.Resources.ResourceManager("PortsSample.Properties.Resources", typeof(Resources).Assembly);
+                    resourceMan = temp;
+                }
+                return resourceMan;
+            }
+        }
+        
+        /// <summary>
+        ///   Overrides the current thread's CurrentUICulture property for all
+        ///   resource lookups using this strongly typed resource class.
+        /// </summary>
+        [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
+        internal static global::System.Globalization.CultureInfo Culture {
+            get {
+                return resourceCulture;
+            }
+            set {
+                resourceCulture = value;
+            }
+        }
+    }
+}
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.resx b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.resx
new file mode 100644
index 00000000..af7dbebb
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Resources.resx	
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+</root>
\ No newline at end of file
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.Designer.cs b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.Designer.cs
new file mode 100644
index 00000000..17e449ac
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.Designer.cs	
@@ -0,0 +1,26 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Runtime Version:4.0.30319.42000
+//
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace PortsSample.Properties {
+    
+    
+    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
+    [global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "17.8.0.0")]
+    internal sealed partial class Settings : global::System.Configuration.ApplicationSettingsBase {
+        
+        private static Settings defaultInstance = ((Settings)(global::System.Configuration.ApplicationSettingsBase.Synchronized(new Settings())));
+        
+        public static Settings Default {
+            get {
+                return defaultInstance;
+            }
+        }
+    }
+}
diff --git a/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.settings b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.settings
new file mode 100644
index 00000000..033d7a5e
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/PortsSample/PortsSample/Properties/Settings.settings	
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<SettingsFile xmlns="uri:settings" CurrentProfile="(Default)">
+  <Profiles>
+    <Profile Name="(Default)" />
+  </Profiles>
+  <Settings />
+</SettingsFile>
\ No newline at end of file
diff --git a/Samples/Port/How to customize port-hover-effect/README.md b/Samples/Port/How to customize port-hover-effect/README.md
new file mode 100644
index 00000000..bb6c02e3
--- /dev/null
+++ b/Samples/Port/How to customize port-hover-effect/README.md	
@@ -0,0 +1,13 @@
+# Port customization sample
+This repository contains sample which shows how to customize Port Hover effect.
+
+__*Documentation*__: https://help.syncfusion.com/wpf/diagram/port/port#padding
+
+## Project pre-requisites
+To run this application, you need to have the below two in your system
+
+* [Visual Studio 2019](https://www.visualstudio.com/wpf-vs)
+* [Syncfusion.SfDiagram.WPF](https://www.nuget.org/packages/Syncfusion.SfDiagram.WPF/) nuget package. To install the package using NuGet Package Manager, refer this [link](https://docs.microsoft.com/en-us/nuget/quickstart/install-and-use-a-package-in-visual-studio#nuget-package-manager).
+
+## Deploying and running the sample
+* To debug the sample and then run it, press F5 or select Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or selectDebug > Start Without Debugging.