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

2 posts, 0 answers
  1. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 05 Apr 2013 Link to this post

    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">
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Apr 2013 Link to this post

    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.

  3. DevCraft banner
Back to Top