How To Bind A Collection Connection Points In A Connection

[Ford]

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?

[Petar Mladenov]

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

[Fabio]

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

[Petar Mladenov]

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

 

 

[Fabio]

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());
};
}
}

[Petar Mladenov]

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

 

 

[Fabio]

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,