Port Label

[Jeremy Branham]

What is the best way to display a label for a given port?

I currently have a label on the connector, but we have a use case where ports should be labeled even when there is no connector present.

Thanks!

[Saranya Chandrasekaran]

Hi Jeremy,

Based on your query “What is the best way to display a label for a given port?", We have created simple sample to achieve your requirement. Please refer to the attached sample.

Sample Details:

In our sample, we have override the ControlTemplate of the ConnectionPort to display ConnectionPort with Label.

Please let us know if you require further assistance on this

Regards,

Saranya C

Attachment: ConnectionPortasLabel_879c529d.zip

[Jeremy Branham]

Thank you. This is what I needed.

[Saranya Chandrasekaran]

Hi Jeremy,

Thanks for the update.

Please let us know if need further assistance on this.

Regards,

Saranya C

[Michael Katsarakis]

Hallo,

this sample is not nice. You don't see the port label.
The thext is inside the port and the port is normally to small.
I want to display the port label because not all the ports are same.
one Y port can only connected wit on Y port a X port with a Xport..

A way to overcome this is a Tooltip... but this means waist of time.

Regards
Michael

[Keerthivasan Ramamoorthy]

Hi Michael, 

Requirement:” Need to display ConnectionPort with Label”. 

As we don’t have a label support for the ConnectionPort. In order to achieve the above requirement, we override the ControlTemplate of the ConnectionPort to display the ConnectionPort with Label in that sample and also we need a support to override the width and height of the label. 

 

Note: 

Could you please provide more details like screenshot/video to achieve your requirement at the earliest? 

 

Regards, 

Keerthivasan R. 

[Michael Katsarakis]

Hallo,
            addPort(node, 70, 70, "Text in connectionPort is longer ");
            addPort(node, 120, 120, "smalltext");    
this Label Text is not full vissible.

See image..

Regards
Michael

Attachment: 00_2fcdb95.7z

[Michael Katsarakis]

A label outside of port could be nice!

see image

Attachment: 00_c4abcba1.7z

[Keerthivasan Ramamoorthy]

Hi Michael, 

As we updated earlier, we don’t have a label support for the ConnectionPort. In order to achieve to Show the ConnectionPort with Label, we override the ControlTemplate of the ConnectionPort to display the ConnectionPort with Label in that sample and set the Width and Height as double.Nan to ConnectionPort. We have provided a code example to represent this. Please refer the code example as below. 

 

Code Example: 

//Add Port to Node 

private ConnectionPort addPort(Node node, Int32 p1, Int32 p2,string text) 

{ 

ConnectionPort port = new ConnectionPort(node, new Point(p1, p2)); 

port.IsHitTestVisible = true; 

port.Style = this.Resources["style"] as Style; 

port.Tag = text; 

port.Width = double.NaN; 

port.Height = double.NaN; 

port.Node = node; 

node.PortVisibility = PortVisibility.AlwaysVisible; 

node.Ports.Add(port); 

return port; 

} 

 

 

  

Note:  

If the provided information not meet your requirement. Please provide more details like screenshot/video to achieve your requirement at the earliest. 

 

 

Regards, 

Keerthivasan R. 

[Michael Katsarakis]

Hallo,

if you don't outcomment the:

port.Width = double.NaN; 

port.Height = double.NaN;
you can see the port text, but you cannot see the port.  '*)%*

It is ok if you say: "we don’t have a label support for the ConnectionPort"
I thing that is a very important thing. If i want to make a connection want to know
what kind of connection points i have. Of course i could solve this problem with
the help of tooltips.. propertyboxes etc. But clicking around is not so nice..

Regards
Michael

[Suresh Shanmugam]

Hi Michael, 

We have prepared the sample based on your requirement by overriding the ConnectionPort template and please find the sample in the below location. 

 

Sample : Diagram_PortLabel 

Regards, 
Suresh Shanmugam 

[Michael Katsarakis]

Hallo Jeremy,

Nice! I have as well orthogonal connectors.
I am not quite happy because if i put the :
            LineConnector connector = new LineConnector();
            connector.HeadNode = node;
            connector.TailNode = node1;
            connector.ConnectionHeadPort = port;
            connector.ConnectionTailPort = port2;

            connector.FirstSegmentLength = 20;
            connector.LastSegmentLength = 20;

... the label is crossed out!

See attachment

Regards
Michael

Attachment: Port_Label_452f4bbe.7z

[Michael Katsarakis]

Hallo Sureth,

I have create an incident.
https://www.syncfusion.com/support/directtrac/incidents/172047

There are some more extensions about the ports.

Thanks
Michael

[Suresh Shanmugam]

Hi Micheal, 

Please find the response for your queries as below, 

Query	Response
Nice! I have as well orthogonal connectors. I am not quite happy because if i put the :             LineConnector connector = new LineConnector();             connector.HeadNode = node;             connector.TailNode = node1;             connector.ConnectionHeadPort = port;             connector.ConnectionTailPort = port2;             connector.FirstSegmentLength = 20;             connector.LastSegmentLength = 20; ... the label is crossed out!	Reported issue : Connector is overlapped on label    We don’t have support to avoid the connector overlapping on Label. If you avoid to this, please change the position of the TextBlock in the sample side.    Following code snippet it used to change the position of the Label.       <TextBlock Name="txtBlock" Margin="-10,10,0,0"                                                                                                                        Text="{BindingPath=DerivedName,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type                                        local:CustomConnectionPort}}}"/>
I have create an incident.  https://www.syncfusion.com/support/directtrac/incidents/172047 There are some more extensions about the ports.	We will update the response to your query in the respective incident – #172047.  Please follow up the incident for further updates.

 

Regards, 

Suresh Shanmugam