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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding position of node (OffsetX & Y)

Thread ID:





130236 May 1,2017 08:44 AM UTC May 2,2017 01:32 PM UTC WPF 1
Tags: Diagram
Asked On May 1, 2017 08:44 AM UTC


I am using custom object binding approach in classic diagram control. 

I have a class called "MyComponent' 

Public Class MyComponent
    Public Property Name As String
    Public Property Left As Integer
    Public Property Top As Integer
    Public Property Width As Integer
    Public Property Height As Integer
End Class
I am trying to bind a collection of 'MyComponent' objects to diagramModel.ItemsSource property.
Also, I have set a style for sf:Node to bind position of each node from the properties of 'MyComponent' like below.
        <!--Style for the  Node-->
        <Style TargetType="{x:Type syncfusion:Node}" >
            <Setter Property="OffsetX" Value="{Binding Left}" />
            <Setter Property="OffsetY" Value="{Binding Top}" />
            <Setter Property="Width" Value="{Binding Width}" />
            <Setter Property="Height" Value="{Binding Height}" />
            <Setter Property="ContentTemplate" Value="{StaticResource NodeTemplate}" />
            <Setter Property="ToolTip" Value="{Binding Name}" />
Looks like binding of position (OffsetX, OffsetY, Width and Height) isn't working. 
I see Nodes rendering on the diagram but their position and sizes are not as per the values of 'MyComponent' object.
Can you please advise how to bind to position and size of the node from custom object properties ?

Thank you.

Suresh Shanmugam [Syncfusion]
Replied On May 2, 2017 01:32 PM UTC

Hi Srikanth, 
Requirement : To bind the position and size of the Node from custom object properties. 
After analyzing the code snippet, the properties were unable to bind with respected properties of the Node. 
When we set the itemsource to DiagramModel, the business objects being as a Node Content. Therefore, we need to bind the node content of the business objects to the respective dependency property of the Node. 
Please refer the following code snippet. 

<Style TargetType="{x:Type syncfusion:Node}"> 
       <Setter Property="ContentTemplate"> 
                           <TextBlock Text="{Binding Name}"/> 
       <Setter Property="OffsetX" Value="{Binding Content.Left, Mode=TwoWay, RelativeSource={RelativeSource Self}}" /> 
       <Setter Property="OffsetY" Value="{Binding Content.Top, Mode=TwoWay, RelativeSource={RelativeSource Self}}" /> 
       <Setter Property="Width" Value="{Binding Content.Width, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/> 
       <Setter Property="Height" Value="{Binding Content.Height, Mode=TwoWay, RelativeSource={RelativeSource Self}}" /> 
       <Setter Property="ToolTip" Value="{Binding Content.Name, Mode=TwoWay, RelativeSource={RelativeSource Self}}" /> 
Suresh Shanmugam 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon