How to create custom connectors and use them?

Question

Hello Syncfusion staff,

I tried to define a custom connector class by inheriting
ConnectorViewModel, but it did not work. I need to insert in my SfDiagram a custom
connector whose color, thickness, and style are different from the ones of the
default connector after clicking on a menu’s button. This connector also
requires to be lineal and to include a few extra properties. I will be very grateful if you could help me with an example
that clarify how to add that functionality.

Thank you,

Tomas

Ranjitha Amirthalingam · Accepted Answer

Hi Tomas, 
 
Requirement: Need to create different connector types with different style through drawingtool. 
 
We have modified the sample to achieve your requirement. Please refer to the sample from the following link. 
 
Sample Link: https://www.syncfusion.com/downloads/support/forum/162873/ze/ModifiedSample1021770733 
 
Sample Details: 
 
In this sample, we have created different connector types using the DefaultConnectorType property of sfdiagram and updated the connector style in the ItemAdded event based on the selected connector type. 
 
Regards, 
Ranjitha A.

Ranjitha Amirthalingam · Answer

Hi Tomas, 
 
Greetings from Syncfusion. 
 
Requirement: Need to create custom connector derived from ConnectorViewModel. 
 
We have created a custom class derived from ConnectorViewModel , updated the custom connector collection to the connectors property of diagram and set style for the connector in xaml. We have provided sample to represent this. Please refer to the sample from the following link. 
 
Sample Link: https://www.syncfusion.com/downloads/support/forum/162873/ze/CustomConnectorSample837180115 
 
Sample Details: 
In this sample, we have enabled drawingtool for diagram to create connector at runtime in a button click event. Connector can be created at runtime by click and drag the diagram , once the button is clicked. 
 
For more details , please refer the below links 
 
Link:  
https://help.syncfusion.com/wpf/diagram/connector/defineconnector 
 
https://help.syncfusion.com/wpf/diagram/connector/appearanceandvalidation 
 
https://help.syncfusion.com/wpf/diagram/tools#drawing-tools 
 
 
Regards, 
Ranjitha A.

Tomas · Answer

Hello
Ranjitha Amirthalingam,

I tried your
approach, but it did not work. For reasons that I do not understand, it does
not recognize the style from the axml code. So, I would like to know how to set
the color, thickness, and the rest of the properties using C#. Additionally, I would
like to know if the connector type (e.g. line and orthogonal) can be set within
the object. I need to be able to insert several types of custom connectors into
my diagram, each one with its style, and possibly, its type.

Thank you for all your help,

Tomas.

Keerthivasan Ramamoorthy · Answer

Hi Tomas, 
 
We can create different types of connectors (each having a different segment) or multiple segments can be added in a single connector one after another. 
 
For more details, please visit the below link: 
https://help.syncfusion.com/wpf/diagram/connector/segments/multiplesegments 
 
Regards, 
Keerthivasan R.

Tomas · Answer

Hello Keerthivasan Ramamoorthy,Thank you for the link, but it really did not solve my problem, I am trying to create 3 or 4 different types of custom connectors (derived from ConnectorViewModel), each one with its own style and set of properties, and possibly with a type of connector in particular (e.g. line or orthogonal). Each connector can be used to link nodes after being activated by clicking on a button. What is more, it must be done using C# only, without defining the style or anything else in .axml. I would be extremely grateful if you could attach an example that help me to achieve that goal.Thank you for all your help,Tomas.

Karkuvel Rajan Shanmugavel · Answer

Hi Tomas, 
 
Requirement: Need to create different types and styles of connector. 
 
We have prepared a simple sample for your requirement. In the sample we have created different types of connector with different styles for each type. Please find the sample below. 
 
Sample link: https://www.syncfusion.com/downloads/support/forum/162873/ze/Different_types_of_Connector1816106597 
 
Regards, 
Karkuvel Rajan S

Tomas · Answer

Hello Karkuvel Rajan Shanmugavel,

 Thank you for your help. The provided example is close to
what I want to reach, but the "key piece of this puzzle" is still
missed. Though I can use a custom connector, I cannot use the drawing tool to link
the nodes. I want to conserve the default behavior while replacing the default
connector with one of the user-defined ones. I add below the blueprint of the
event I am trying to define:



          private
void Button_Click(object sender, EventArgs e)
        {
            - CODE to make
available the custom connector to link two nodes, without select them
- 
            Diagram.Tool
= Tool.DrawOnce; //it could be there or not. Though a way for returning to the default connector is important
           
Diagram.DrawingTool = DrawingTool.Connector
        }

Please, if it is possible, could you include an example. It
is easier to follow your explanation when it is available. I am sure others, as
well as myself, will be very grateful for it.



Thank you,



Tomas