Articles in this section
Category / Section

How to prevent the Connector lines from overlapping the Connector's target decorator in WPF Diagram(SfDiagram)?

2 mins read

In the WPF Diagram, when the TargetDecorator of a Connector is set to a shape like “ClosedASME,” sometimes it may appear to overlap the connector segment. A simple way to resolve this is by reducing the size of the TargetDecorator using the TargetDecoratorStyle property. Below is an example demonstrating how to configure this in XAML:

XAML Code Snippet:

<!--Set the TargetDecorator shape to "ClosedASME"-->
<Setter Property="TargetDecorator" Value="{StaticResource ClosedASME}"/>

<!--Style for the Connectors TargetDecorator-->
<Setter Property="TargetDecoratorStyle">
    <Setter.Value>
        <Style TargetType="Path">
            <!-- Reduce the Width-->
            <Setter Property="Width" Value="15"/>
            <Setter Property="Fill" Value="#6BA5D7"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Stretch" Value="Fill"/> 
        </Style>
    </Setter.Value>
</Setter> 

Another way to resolve this issue is by using a different TargetDecorator shape instead of “ClosedASME.” For example, you can use “ClosedSharp”.

XAML Code Snippet:

<!--Set the TargetDecorator shape to "ClosedSharp"-->
<Setter Property="TargetDecorator" Value="{StaticResource ClosedSharp}"/>

<!--Style for the Connectors TargetDecorator-->
<Setter Property="TargetDecoratorStyle">
   <Setter.Value>
       <Style TargetType="Path">
           <Setter Property="Fill" Value="#6BA5D7"/>
           <Setter Property="StrokeThickness" Value="1"/>
           <Setter Property="Stretch" Value="Fill"/>
       </Style>
   </Setter.Value>
</Setter> 
BEFORE AFTER
node and connector
node and connector

Conclusion
I hope you enjoyed learning about how to prevent the Connector lines from overlapping the Connector’s target decorator in the WPF Diagram.
You can 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®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied