I created a setup that closely matches the MVVM examples on http://docs.telerik.com/devtools/wpf/controls/raddiagram/populating-with-data/data-databinding. The RadDiagram is populated via a Graphsource. Peeking at the behind-the-scenes, it looks like the diagram wrap each item of the InternalItems collection in a RadDiagramShape to display it. How do I actually access those RadDiagramShape objects for each node so that I can manipulate it via code?
4 Answers, 1 is accepted
0
Matthias
Top achievements
Rank 1
answered on 12 May 2017, 07:24 PM
As an example: say I have a list of nodes that I load and feed into the diagram via the Graphsource. Links between those nodes are specified separately (and I'm not using the built-in serialization for diagram graphs, I construct it myself at runtime). I now want to construct all links between the nodes that I fed into the diagram, including which connector each link originates from and flows into. As far as I can tell, I need to modify the RadDiagramShape that each of my node objects was wrapped by. How do I actually access them? My nodes don't have any knowledge of their wrappers.
0
Matthias
Top achievements
Rank 1
answered on 12 May 2017, 07:26 PM
For example: I have a list of nodes that I load manually and feed into the diagram's GraphSource. Links are loaded seperately, and I want to create all those links between each node programmatically. (I'm not using the built-in diagram serialization and don't want to). How do I actually generate the connections, specifying which connector port they come from and go to? As far as I can see I need to do this on the RadDiagramShapes that each of my nodes got wrapped into as part of the GraphSource. Correct? If so, how do I access them? My node objects have no knowledge of their wrappers.
0
Accepted
Hi Matthias,
I am sedning you sample project with two ways you can add connection linking specific connectors. Basically you will see the first approach commented and the second, which is more MVVM - uncommented:
The second requires the following properties and styles:
I hope this helps you move forward.
Regards,
Petar Mladenov
Telerik by Progress
I am sedning you sample project with two ways you can add connection linking specific connectors. Basically you will see the first approach commented and the second, which is more MVVM - uncommented:
private
void
RadButton_Click(
object
sender, RoutedEventArgs e)
{
// Variant 1. Models => Container Generator => Shapes => AddConnection method.
//var golf = (this.diagram.GraphSource as CarsGraphSource).InternalItems[4];
//var audi = (this.diagram.GraphSource as CarsGraphSource).InternalItems[7];
//var golfShape = this.diagram.ContainerGenerator.ContainerFromItem(golf) as RadDiagramShape;
//var audiShape = this.diagram.ContainerGenerator.ContainerFromItem(audi) as RadDiagramShape;
//this.diagram.AddConnection(golfShape, audiShape, "Top", "Bottom");
// Variant 2.
var golf = (
this
.diagram.GraphSource
as
CarsGraphSource).InternalItems[4];
var audi = (
this
.diagram.GraphSource
as
CarsGraphSource).InternalItems[7];
Link link =
new
Link()
{
Source = golf,
Target = audi,
SourceConnectorString =
"Top"
,
TargetConnectorString =
"Bottom"
};
(
this
.diagram.GraphSource
as
CarsGraphSource).AddLink(link);
}
The second requires the following properties and styles:
public
class
Link : LinkViewModelBase<NodeViewModelBase>
{
private
string
sourceConnectorPos;
public
string
SourceConnectorString
{
get
{
return
this
.sourceConnectorPos ??
"Auto"
;
}
set
{
if
(
this
.sourceConnectorPos != value)
{
this
.sourceConnectorPos = value;
this
.OnPropertyChanged(
"SourceConnectorString"
);
}
}
}
private
string
targetConnectorPos;
public
string
TargetConnectorString
{
get
{
return
this
.targetConnectorPos ??
"Auto"
;
}
set
{
if
(
this
.targetConnectorPos != value)
{
this
.targetConnectorPos = value;
this
.OnPropertyChanged(
"TargetConnectorString"
);
}
}
}
}
<
telerik:RadDiagram.ConnectionStyle
>
<
Style
TargetType
=
"telerik:RadDiagramConnection"
>
<
Setter
Property
=
"SourceConnectorPosition"
Value
=
"{Binding SourceConnectorString, Mode=TwoWay}"
/>
<
Setter
Property
=
"TargetConnectorPosition"
Value
=
"{Binding TargetConnectorString, Mode=TwoWay}"
/>
</
Style
>
</
telerik:RadDiagram.ConnectionStyle
>
I hope this helps you move forward.
Regards,
Petar Mladenov
Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Matthias
Top achievements
Rank 1
answered on 16 May 2017, 05:29 AM
Thanks. Between this and hooking into the diagram.Items, diagram.Shapes and diagram.Connections collections, I've been able to do what I need to do.