This is a migrated thread and some comments may be shown as answers.

Binding to the location of a Node (Position or X/Y)

1 Answer 269 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 05 Apr 2013, 07:56 PM
Is there a simple example or recommended way to bind the the location (either position or X/Y coordinates) to the Node item in the GraphSource?    I'd like to store/restore this position data back to the diagram when the user returns.  

This is what I've tried, and it isn't working.  Apparently the position of the RadDiagramShape isn't being reflected on the screen.

ViewModel -->  has a populated 'Position' observable value (Point(x, y)).

<DataTemplate x:Key="shapeTemplate">                
<StackPanel Orientation="Vertical">
<telerik:RadDiagramShape Content="{Binding RawShape}"
Background="{Binding ShapeColor}"
                                             Width="60"
Height="60"
                                             Position="{Binding Position}"
Style="{StaticResource RadDiagramShapeStyle}" />
<TextBlock HorizontalAlignment="Center" Text="{Binding WorkflowTask.TaskName}" />
</StackPanel>
</DataTemplate> 


  <telerik:RadDiagram x:Name="diagram"
                                
GraphSource="{Binding GraphSourceObject}"
ConnectionStyle="{StaticResource LinkStyle}"
ConnectionTemplate="{StaticResource LinkTemplate}"
                                ShapeTemplate="{StaticResource shapeTemplate}"
SelectionMode="{Binding SelectionMode, Converter={StaticResource DiagramSelectionModeConverter}}"
                                
                                UseLayoutRounding="False"
                                
                                AllowCopy="False"
                                AllowDelete="False"
                                AllowCut="False"
                                AllowDrop="False"
                                AllowPaste="False"
                                
                                IsPanEnabled="True"
                                IsDraggingEnabled="True"
IsEditable="True"
IsZoomEnabled="True"

                                IsInformationAdornerVisible="False"
IsManipulationAdornerVisible="False"
IsConnectorsManipulationEnabled="False"
                                
                                IsBackgroundSurfaceVisible="True"
IsMouseCaptured="True"
IsRotationEnabled="False"
IsResizingEnabled="False"

                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto">

1 Answer, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 08 Apr 2013, 07:58 AM
Hello Tom,

Please note that in DataBinding scenarios, when you populate the ItemsSource of an ItemsControl with data items, most ItemsControls wrap the business data in UIElements.

With RadDiagram when you populate the GraphSource with business data of nodes and links(using the DiagramExtensions business classes), each node is wrapped in dynamically created a RadDiagramShape and each link - in a RadDiagramConnection. This means that you don't have to use the RadDiagramShape/RadDiagramConnection in the DataTemplates.

In the code snippet you sent, you've defined a shape in the shapeTemplate which basically creates a shape inside a shape as the RadDiagram automatically wraps your nodes in shapes. This is why the Position binding works but only for the inner shape and I'm guessing you're working with the outer shape. So instead please use the DataTemplate to define the visualization of the content of the dynamically generated RadDiagramShapes. And use the RadDiagramShapeStyle to bind the Position and Background properties of the shape as well as define its size.

Also, as you need to update the Position property whenever a user changes the position of a shape in run-time, you need to use TwoWay binding:
<DataTemplate x:Key="shapeTemplate">               
    <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding RawShape}"/>
        <TextBlock HorizontalAlignment="Center" Text="{Binding WorkflowTask.TaskName}" />
    </StackPanel>
</DataTemplate>
 
<Style TargetType="telerik:RadDiagramShape" x:Key="RadDiagramShapeStyle">
    <Setter Property="Position" Value="{Binding Position,Mode=TwoWay}"/>
    <Setter Property="Width" Value="60"/>
    <Setter Property="Height" Value="60"/>
    <Setter Property="Background" Value="{Binding ShapeColor}"/>
</Style>

You can examine the following tutorials for more information on how to use RadDiagram in MVVM scenarios:

Let me know if this information helps or if we can further assist you.


Regrads,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Diagram
Asked by
Tom
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Share this question
or