Label text outside the boundaries of a node?

[Todd Lichtas]

Is it possible to have a label next to a node rather than contained within the node?  I have an application that will contain fairly small nodes, and the node labels are being cropped within the boundaries of the node.

[Sudhakar C]

Hi Todd,

 

The Label is the part of the Node, so the Label should not be outside the boundaries of the Node. It should be remains within the boundary. However, to avoid the Label cropped with in the Node, we are suggested you to please set the LabelTextWrapping property of the node as Wrap. For more information please refer the following code snippet and attached image.

 

Code Snippet :

 

Node node = new Node() {Width=50,Height=50,Shape=Shapes.Rectangle,Label="LabelWithWraping"}; 

 

//Set the LabelTextWrapping

node.LabelTextWrapping = TextWrapping.Wrap;

diagramModel.Nodes.Add(node);

 

 

 

Please let us know if you require further assistance on this.

 

Regards,

 

Sudhakar C

WrapImage_b975171b.zip

[Todd Lichtas]

I found a solution to my issue.  I created a second node with AllowSelect = false for each actual node to hold the label.  I then handled the diagramView_NodeDragging event to reposition the label node when the actual node is moved.  This gives the appearance of a label outside of the actual node.  Here's how I did it for anyone else that is interested.

 

Private Function addNode()

    'Create the actual node, but it is too small to display a label

    Dim actualNode As New Node()

    actualNode.Height = 15

    actualNode.Width = 15

    actualNode.Shape = Shapes.Triangle

    actualNode.OffsetX = 50

    actualNode.OffsetY = 50

    actualNode.Label = “Name”

    actualNode.LabelVisibility = Windows.Visibility.Hidden

    diagramModel.Nodes.Add(actualNode)

 

    'Create another node to act as a label for the actual node

    Dim labelNode As New Node()

    labelNode.Height = 20

    labelNode.Width = 80

    actualNode.Shape = Shapes.Rectangle

    labelNode.OffsetX = actualNode.OffsetX + 20

    labelNode.OffsetY = actualNode.OffsetX - 5

    labelNode.Label = “Name”

    labelNode.LabelHorizontalAlignment = Windows.HorizontalAlignment.Left

    labelNode.AllowSelect = False

    diagramModel.Nodes.Add(labelNode)

 

    'Add the NodeDragging event handler

    AddHandler diagramView.NodeDragging, AddressOf diagramView_NodeDragging

End Sub

 

 

Private Sub diagramView_NodeDragging(ByVal sender As Object, ByVal evtArgs As NodeRoutedEventArgs)

    'Identify the node being moved by label name and hidden properties, and reposition the label node with it.

    For i = 0 To diagramModel.Nodes.Count - 1

        If diagramModel.Nodes(i).Label = evtArgs.Node.Label And diagramModel.Nodes(i).LabelVisibility = Windows.Visibility.Visible Then

            If evtArgs.Node.LabelVisibility = Windows.Visibility.Hidden Then

                diagramModel.Nodes(i).OffsetX = evtArgs.Node.OffsetX + 20

                diagramModel.Nodes(i).OffsetY = evtArgs.Node.OffsetY - 5

            End If

        End If

    Next

End Sub

 

[Sudhakar C]

Hi Todd,

 

Thanks for the update. Your previous update will be work fine. And also, please let us know if you have any other concerns. As always, we will be happy to assist you. Thanks for using Syncfusion Products.

 

Regards,

 

Sudhakar C

[Michael Katsarakis]

node.LabelDisplacement = new Point(0, -50);

[Ranjitha Amirthalingam]

Hi Michael, 

 

Thanks for your update. 

 

Yes. The reported requirement can be achieved by using the LabelDisplacement property of the Node. Please refer to the below screenshot. 

 

Screenshot: 

 

 

 

 

Regards, 

Ranjitha A.