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

How To Bind A Collection Connection Points In A Connection

6 Answers 168 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Ford
Top achievements
Rank 1
Ford asked on 09 Oct 2013, 04:14 PM
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?

6 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 14 Oct 2013, 08:46 AM
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 >>
0
Fabio
Top achievements
Rank 1
answered on 29 Oct 2014, 10:02 AM
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

0
Petar Mladenov
Telerik team
answered on 30 Oct 2014, 03:17 PM
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.

 
0
Fabio
Top achievements
Rank 1
answered on 03 Nov 2014, 02:20 PM
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());
};
}
}
0
Petar Mladenov
Telerik team
answered on 06 Nov 2014, 08:49 AM
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.

 
0
Fabio
Top achievements
Rank 1
answered on 06 Nov 2014, 09:10 AM
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,

Tags
Diagram
Asked by
Ford
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Fabio
Top achievements
Rank 1
Share this question
or