How To Bind A Collection Connection Points In A Connection

7 posts, 0 answers
  1. Ford
    Ford avatar
    1 posts
    Member since:
    Dec 2008

    Posted 09 Oct 2013 Link to this post

    We want to connect two ends of a RadDiagramConnection using a collection of points in the domain that can vary.  So it be useful to bind directly to the ConnectionPoints collection in the XAML.  Any way to do this?
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 14 Oct 2013 Link to this post

    Hi Ford,

     Why not using a ViewModels and bind directly the StartPoint / EndPoint to Points from your ViewModel ?
    You can have a collection of points that vary and ViewModel Point property like so:

    public Point FirstPoint
    {
        get
        {
             return this.connectionPoints[0];
         }
    }
    Please elaborate more on your scenario if this suggestion is not applicable.Regards,
    Petar Mladenov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 29 Oct 2014 in reply to Petar Mladenov Link to this post

    Hi Petar,

    I am just using MVVM approach.
    I implemented a graph source that inherits from  SerializableGraphSourceBase<NodeViewModel, ConnectionViewModel>.

    The requirement is to persist all ConnectionPoints in the database so I need to bind them to a property of my ConnectionViewModel (that is as LinkViewModelBase<NodeViewModel>).
    Unfortunately the property ConnectionPoints of RadDiagramConnection is not a DependencyProperty so I cannot bind anything it.

    I am going to create an attached property to manage this lack, is this the only way or I missed something?

    Thanks,
    Regards

  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 30 Oct 2014 Link to this post

    Hi Fabrizio,

    How do you save your RadDiagram in the DataBase ? The good news is that the RadDiagram can be easily stored in XML file / XML string with its Save/Load methods / commands. Also, the diagram automatically saves its shapes collection and its connections collection. Don't worry for the ConnectionPoints property - it is also serialized and it doesn't matter whether the diagram is databound or not. Here you can view a sample serialized diagram xml string:
     
    <?xml version="1.0" encoding="utf-8"?><RadDiagram><Metadata Type="Telerik.Windows.Diagrams.Core.DiagramMetadata" Id="d87bfa95-3b4f-42a7-825f-8bb586931c62" /><Groups /><Shapes QNs="Telerik.Windows.Controls.Diagrams, Version=2014.3.1028.40, Culture=neutral, PublicKeyToken=5803cfa389c90ce7;"><RadDiagramShape Type="Telerik.Windows.Controls.RadDiagramShape" Id="d66ed9c3-3ebc-44ba-af9e-d0e46bdf2f4e" ZIndex="1" Position="1256;783" Content="A4" Size="Auto;Auto" RotationAngle="0" MinWidth="0" MinHeight="0" MaxWidth="INF" MaxHeight="INF" UseDefaultConnectors="True" QN="0" NodeUniqueIdKey="37902766"><Connectors QNs="Telerik.Windows.Controls.Diagrams, Version=2014.3.1028.40, Culture=neutral, PublicKeyToken=5803cfa389c90ce7;"><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Auto" Offset="0.5;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Left" Offset="0;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Top" Offset="0.5;0" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Right" Offset="1;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Bottom" Offset="0.5;1" QN="0" /></Connectors></RadDiagramShape><RadDiagramShape Type="Telerik.Windows.Controls.RadDiagramShape" Id="12fc8c10-3a06-4965-8ff5-945e58c94bc0" ZIndex="1" Position="851;814" Content="A6" Size="Auto;Auto" RotationAngle="0" MinWidth="0" MinHeight="0" MaxWidth="INF" MaxHeight="INF" UseDefaultConnectors="True" QN="0" NodeUniqueIdKey="47670010"><Connectors QNs="Telerik.Windows.Controls.Diagrams, Version=2014.3.1028.40, Culture=neutral, PublicKeyToken=5803cfa389c90ce7;"><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Auto" Offset="0.5;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Left" Offset="0;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Top" Offset="0.5;0" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Right" Offset="1;0.5" QN="0" /><RadDiagramConnector Type="Telerik.Windows.Controls.Diagrams.RadDiagramConnector" Name="Bottom" Offset="0.5;1" QN="0" /></Connectors></RadDiagramShape></Shapes><Connections QNs="Telerik.Windows.Controls.Diagrams, Version=2014.3.1028.40, Culture=neutral, PublicKeyToken=5803cfa389c90ce7;">
     
    <RadDiagramConnection
    Type="Telerik.Windows.Controls.RadDiagramConnection"
    Id="e3318c0c-0d46-4fd0-802d-60412e3ccc09"
    ZIndex="1
    " Position="912;671"
     IsRotationEnabled="false"
     IsResizingEnabled="false"
    Content="MVVM.Link"
    SourceConnectorPosition="Right"
     TargetConnectorPosition="Auto"
     SourceCapType="None"
    TargetCapType="None"
     SourceCapSize="7;7"
     TargetCapSize="7;7"
    StartPoint="912;834.5"
     Source="12fc8c10-3a06-4965-8ff5-945e58c94bc0"
     EndPoint="1256;803.5"
    Target="d66ed9c3-3ebc-44ba-af9e-d0e46bdf2f4e"
     ConnectionType="Polyline"
     ConnectionPoints="921;731;967;719;1033;697;1084;684;1140;671"
     IsModified="True"
    QN="0"
    SourceUniqueId="47670010"
     TargetUniqueId="37902766" />
    </Connections></RadDiagram>

    You can play easily with Diagrams Serialization. For example, use some of ours SL demos, select all items in the diagram, copy and then paste in any text editor (NotePad, Wordpad, Word) - you will receive the diagram xml string.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 03 Nov 2014 in reply to Petar Mladenov Link to this post

    Hi Petar,

    I am sorry but I cannot save the Whole diagram into the db.
    We have separate entities in separate tables for each shape we manage.
    Also connections are stored in a table and the connection points are a field of that table.
    At the moment I solved the issue with the following attached behavior:

    public static class RadDiagramConnectionBehavior
    {
    public static ObservableCollection<Point> GetConnectionPoints(DependencyObject obj)
    {
    return (ObservableCollection<Point>)obj.GetValue(ConnectionPointsProperty);
    }

    public static void SetConnectionPoints(DependencyObject obj, ObservableCollection<Point> value)
    {
    obj.SetValue(ConnectionPointsProperty, value);
    }

    // Using a DependencyProperty as the backing store for ConnectionPoints. 
            public static readonly DependencyProperty ConnectionPointsProperty =
    DependencyProperty.RegisterAttached("ConnectionPoints",
    typeof(ObservableCollection<Point>), typeof(RadDiagramConnectionBehavior),
    new UIPropertyMetadata(null, OnConnectionPointsChanged));

    static void OnConnectionPointsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
                

                var connPoints = e.NewValue as ObservableCollection<Point>;
    if (connPoints == null)
    return;

    RadDiagramConnection diagram = d as RadDiagramConnection;
    if (diagram == null)
    return;

    var diagramConnectionPoints = diagram.ConnectionPoints as ObservableCollection<Point>;
    if (diagramConnectionPoints == null)
    return;

    Debug.Assert(diagramConnectionPoints.Count == 0);

    foreach (var item in connPoints)
    diagramConnectionPoints.Add(item);

    diagramConnectionPoints.CollectionChanged += (sender, args) =>
    {
    var action = args.Action;
    if (action == NotifyCollectionChangedAction.Reset)
    connPoints.Clear();
    else if (action == NotifyCollectionChangedAction.Add)
    {
    Debug.Assert(args.NewItems != null && args.NewItems.Count == 1);
    Point point = (Point)args.NewItems[0];
    connPoints.Add(point);
    }
    else
    Debug.Fail("Evento non gestito: " + action.ToString());
    };
    }
    }
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 06 Nov 2014 Link to this post

    Hi Fabrizio,

    We understand your scenario. Currently we are not aware of better ways for this requirement than using attached property / attached behavior. Saving the whole diagram in XML string is just an option which you can consider in the future if you need to redesign your application or work on another Diagram.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 06 Nov 2014 in reply to Petar Mladenov Link to this post

    Hi Petar,

    thank for the answer. Yes I saved the whole diagram into a blob for another business logic but this is not the case.

    Luckily, debugging I found that the collection of ConnectionPoints is an ObservableCollection because the property simply exposes an IList.

    Regards,

Back to Top
UI for WPF is Visual Studio 2017 Ready