Position where the edges goes from node

Mar 13, 2013 at 1:18 PM
Edited Mar 13, 2013 at 1:21 PM
Hello everyone!

I want to achieve something like in picture below:


where ICs is my nodes, lines is edges.
Other elements (switches, resistors, etc) it's doesn't matter.

In other words, how can i draw the multilines (edges) from (to)
user control (node, IC-integrated circuit) in something like this order ?

In default edges goes from middle of node.
How can I set (position) where the line goes from node ?

reg ChrisL
Mar 13, 2013 at 3:36 PM
I have done something similar but not quite the same. In my case I needed the edge to always attach itself to the bottom left corner of a node instead of changing the point it is attached to when you move the node. I did it by using a modified version of the EdgeRouteToPathConverter class and using it to set the template of EdgeControls :
              <Style TargetType="{x:Type graphsharp:EdgeControl}">
                   <Setter Property="Template">
                            <ControlTemplate TargetType="{x:Type graphsharp:EdgeControl}">
                                    <Path Stroke="{TemplateBinding Foreground}"  StrokeThickness="{TemplateBinding StrokeThickness}">
                                                    <MultiBinding Converter="{StaticResource MyRouteToPathConverter}">
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Source.(graphsharp:GraphCanvas.X)" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Source.(graphsharp:GraphCanvas.Y)" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Source.ActualWidth" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Source.ActualHeight" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Target.(graphsharp:GraphCanvas.X)" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Target.(graphsharp:GraphCanvas.Y)" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Target.ActualWidth" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Target.ActualHeight" />
                                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="RoutePoints" />
The default implementation of the EdgeRouteToPathConverter has two lines like this:
Point p1 = GraphConverterHelper.CalculateAttachPoint( sourcePos, sourceSize, ( hasRouteInfo ? routeInformation[0] : targetPos ) );
Point p2 = GraphConverterHelper.CalculateAttachPoint( targetPos, targetSize, ( hasRouteInfo ? routeInformation[routeInformation.Length - 1] : sourcePos ) );
These two lines set where the edge is attached on the source and target nodes. In my case I just replaced one of them with the bottom left corner of the source node. You could maybe have one more value or a converter parameter to your EdgeRouteToPathConverter (maybe an enumeration of attach points or just an integer) and use it to determine the attach points.

Hope that helps.
Mar 13, 2013 at 5:21 PM
Thanks for reply.
Could You publish whole solution ?
Mar 14, 2013 at 9:39 AM
I can't, sorry, but I think that is the only part of the solution you need. Create your own MultiValueConverter that will be the same as the EdgeRouteToPathConverter except for those two lines calling GraphConverterHelper.CalculateAttachPoint . Your custom edge class could have two properties that specify where it should be attached to the source and the target node, and your own MultiValueConverter could have two more values passed into it along with the existing ones - these properties of your custom edge (they could be just an integer or an enumeration). Then based on these properties in your modification of EdgeRouteToPathConverter you will set the attach points of your source and target nodes (the p1 and p2 points in the existing EdgeRouteToPathConverter). You also need to set the EdgeControl's template property to use your EdgeRouteToPathConverter like shown above.