We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Label text outside the boundaries of a node?

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.

5 Replies

SC Sudhakar C Syncfusion Team April 12, 2013 04:49 AM UTC

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;





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




Sudhakar C


TL Todd Lichtas April 12, 2013 05:18 PM UTC

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



    '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



    '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


End Sub


SC Sudhakar C Syncfusion Team April 15, 2013 07:24 AM UTC

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.




Sudhakar C

MK Michael Katsarakis March 24, 2017 08:47 AM UTC

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

RA Ranjitha Amirthalingam Syncfusion Team March 27, 2017 12:37 PM UTC

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. 
Ranjitha A. 

Live Chat Icon For mobile
Up arrow icon