Increase distance betweend links

Hello,

How can we increase the (verfical) distance between the links?
Please check the scenario below.
Here the nodes are having two relationships. Sometimes the links overlaps and displays as below.
How can we ensure minimam distance between links in this case?
Other Info:
I am using following layout
<go:Diagram.Layout> <golayout:LayeredDigraphLayout LayerSpacing="75" ColumnSpacing="8" > </golayout:LayeredDigraphLayout> </go:Diagram.Layout>
Thanks
Hardik

LayeredDigraphLayout uses artifical vertexes when dealing with multiple links, in order to separate them. Although such vertexes have zero size, it uses the ColumnSpacing property to control how far apart they are. So you just need to increase that value.

Hi Walter,

Thanks for quick reply.
Please check the second image. It happens when I move one of the nodes. There is enough space to show the links seperately but they overlaps.
Can we force recalculate and redrawing of this links in case we move the nodes?
Further to this is there any way to set the ColumnSpacing for two individual nodes (may be conditionally) instead of setting it at Layout Level?
Regards,
Hardik

When a node is moved (whether interactively or programmatically), the connected links have to be re-routed. Doing so means it recalculates the route without the knowledge or the assumptions that the layout used. (So the answer to your first question is that you don’t need to – it does automatically, but it cannot know about what the layout knew.)

However I am surprised in this case that something like what you want isn’t happening automatically. If there are multiple links going between the same pair of ports, the link routing will automatically calculate different “curviness” values for each of the links. This is true not only for Bezier curves but for normal straight-line segments.

So I am wonder if perhaps you are doing something to prevent that. Are you setting/data-binding Route.Curviness?

For your second question, you could override LayeredDigraphLayout.NodeMinColumnSpace. However I do not think any of us have tried it for this kind of situation.

Hi Walter,

Steps to reproduce:
1. Execute the application
2. Ovserve the link distance
3. Move one of the node
4. Observe the link distance. The links are now overlaps
Note: Northwoods.GoSilverlight Version 1.2.6.4
Please find the code below for your review.
MainPage.xaml

<UserControl x:Class="LINK_Vert_Dist.MainPage"<?: prefix = o ns = "urn:schemas-microsoft-com:office:office" />

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

xmlns:go="clr-namespace:Northwoods.GoXam;assembly=Northwoods.GoSilverlight"

xmlns:gotool="clr-namespace:Northwoods.GoXam.Tool;assembly=Northwoods.GoSilverlight"

xmlns:golayout="clr-namespace:Northwoods.GoXam.Layout;assembly=Northwoods.GoSilverlight"

d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

<DataTemplate x:Key="NodeTemplate">

<StackPanel Orientation="Vertical" go:Part.SelectionAdorned="True" go:Part.Deletable="False"

go:Node.IsTreeExpanded="True" >

<go:NodePanel Sizing="Auto"

go:Node.LinkableFrom="False"

go:Node.LinkableTo="False"

>

<Path go:NodePanel.Figure="Rectangle" Fill="LightGray" />

<StackPanel>

<TextBlock Text="{Binding Path=Data.Name}"

MinWidth="100" MaxWidth="100" TextWrapping="Wrap"

HorizontalAlignment="Left" />

</StackPanel>

</go:NodePanel>

</StackPanel>

</DataTemplate>

<DataTemplate x:Key="LinkTemplate">

<go:LinkPanel go:Part.SelectionElementName="Path" go:Part.SelectionAdorned="True" >

<go:Link.Route>

<go:Route RelinkableFrom="False" RelinkableTo="False" />

</go:Link.Route>

<Path go:LinkPanel.IsLinkShape="True"

x:Name="Path" Stroke="{Binding Path=Data.LinkColor}" StrokeThickness="1" />

<Path StrokeThickness="1" Stroke="{Binding Path=Data.LinkColor}"

go:LinkPanel.ToArrow="Standard" />

<TextBlock Text="{Binding Path=Data.LabelText, Mode=TwoWay}" go:LinkPanel.Offset="8 8"

FontSize="9" go:Part.TextEditable="False" go:LinkPanel.Orientation="Upright" />

</go:LinkPanel>

</DataTemplate>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="35"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<StackPanel Orientation="Horizontal" Grid.Row="0">

<Button Content="Redraw graph" x:Name="btnRedraw" Click="btnRedraw_Click"></Button>

</StackPanel>

<go:Diagram x:Name="graph1" Grid.Row="1"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch"

Padding="10"

NodeTemplate="{StaticResource NodeTemplate}"

LinkTemplate="{StaticResource LinkTemplate}">

<go:Diagram.Layout>

<golayout:LayeredDigraphLayout LayerSpacing="150" ColumnSpacing="8" x:Name="graphLayout" >

</golayout:LayeredDigraphLayout>

</go:Diagram.Layout>

</go:Diagram>

</Grid>

</UserControl>

MainPage.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Northwoods.GoXam.Model;

using System.ComponentModel;

namespace LINK_Vert_Dist

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

Init();

}

private void Init()

{

var model = new GraphLinksModel<MyNode, String, String, MyLink>();

model.Modifiable = true;

graph1.Model = model;

model.NodeKeyPath = "Name";

model.StartTransaction("TEST");

MyNode node1 = new MyNode("node1");

MyNode node2 = new MyNode("node2");

model.AddNode(node1);

model.AddNode(node2);

MyLink link1;

link1 = model.AddLink(node1, "", node2, "");

link1.LinkColor = "Green";

link1.LabelText = "IS-A";

MyLink link2;

link2 = model.AddLink(node1, "", node2, "");

link2.LabelText = "IS-Exactly";

link2.LinkColor = "Blue";

model.CommitTransaction("TEST");

}

private void btnRedraw_Click(object sender, RoutedEventArgs e)

{

graph1.LayoutDiagram();

}

}

public class MyNode : GraphLinksModelNodeData<String>

{

public string Name { get; set; }

public MyNode(string name)

{

Name = name;

Key = name;

}

}

public class MyLink : GraphLinksModelLinkData<String, String>

{

public String LinkColor

{

get;

set;

}

public String LabelText

{

get;

set;

}

}

}

Thanks
Hardik

You could try setting LayeredDigraphLayout.SetsPortSpots=“False”.
I hope that doesn’t mess up the layout’s routing too much.

An alternative is to set Link.Route.Adjusting=“End” or maybe “Stretch”.