Binding position of node (OffsetX & Y)

[Srikanth]

Hi,

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}" />
        </Style>
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.

Sri.

[Suresh Shanmugam]

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"> 

              <Setter.Value> 

                     <DataTemplate> 

                           <TextBlock Text="{Binding Name}"/> 

                    </DataTemplate> 

              </Setter.Value> 

       </Setter> 

       <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}}" /> 

</Style> 

 

 

Regards, 

Suresh Shanmugam