How to change the PortHover effect color in the WPF Diagram?

In the WPF Diagram (SfDiagram), You can change the PortHover effect color by overriding the style for the RunTimeConnectionIndicator. In this style, you can use a trigger to modify the PortHoverEffect color. We have provided the code example for how to achieve this.

Code Snippet

<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> 

View sample in GitHub

Conclusion:
I hope you enjoyed learning how to change the PortHover effect color in the WPF Diagram

Refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!