Reverse TreeLayout?


Thank you in advance for your help! Logically my view model takes the following form, where the child points to the parent:

Root <-- Child-1-A <-- Child-2-A <-- etc.
Root <-- Child-1-A <-- Child-2-B <-- etc.

Root <-- Child-1-B <-- Child-2-C <-- etc.

Root <-- Child-1-C <-- Child-2-D <-- etc.


But when I used a TreeLayout with an Angle of 90 I got a horrible layout, since the above is really a reverse tree. I then decided to create my view model to be a regular tree, that is, the parents point to the children. Then the layout looks fantastic, but the arrows are backwards. So I then started rendering my links like so: . So the links look okay (not great, the BackwardTriangle doesn’t render as nicely as the regular ToArrow), but that was good enough.

However, now when a link is selected to be edited the selected link has the regular arrows, without the backward triangle. I’m doing all of this because I didn’t find a way to get the TreeLayout to layout my nodes properly when it was an upside-down tree. Is there an easier way to handle my use-case? Is there a way I can leverage the logic in TreeLayout and extend it and use something like an UpsideDownTreeLayout?

I am confident you can do what you want, but I think it would be easier to just set Diagram.TreePath=“Source”.

That would let you structure the graph the way that your data is organized and avoid the need to reverse the direction of the “arrow”.

Thank you for your quick reply!

I think I tried what you suggested, but I didn’t get anywhere. Below I’m attaching some code that recreated a minimal working example. Here is the current layout I get, which has the links in the right order but the layout looks terrible:

I need this to look good!

Here is the same code with the From and To reversed, and the layout looks great but the links are reversed:

And here is my XAML to reproduce the above:

<Window x:Class=“TestLayout.MainWindow”
Title=“MainWindow” Height=“350” Width=“525” xmlns:go=“”>

<go:Diagram Name=“diagram” TreePath=“Source”>
<go:TreeLayout Angle=“90” Alignment=“CenterSubtrees” />

And here is my code-behind:

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Northwoods.GoXam.Model;

namespace TestLayout

/// Interaction logic for MainWindow.xaml

public partial class MainWindow : Window
public MainWindow()
var model = new GraphLinksModel<GraphLinksModelNodeData, String, String, GraphLinksModelLinkData<string, string>>();
model.NodesSource = new List<GraphLinksModelNodeData>()
new GraphLinksModelNodeData(){Text=“Root”, Key=“Root”},
new GraphLinksModelNodeData(){Text=“Child-1-A”, Key=“Child-1-A”},
new GraphLinksModelNodeData(){Text=“Child-1-B”, Key=“Child-1-B”},
new GraphLinksModelNodeData(){Text=“Child-1-C”, Key=“Child-1-C”},
new GraphLinksModelNodeData(){Text=“Child-2-A”, Key=“Child-2-A”},
new GraphLinksModelNodeData(){Text=“Child-2-B”, Key=“Child-2-B”},
new GraphLinksModelNodeData(){Text=“Child-2-C”, Key=“Child-2-C”},
new GraphLinksModelNodeData(){Text=“Child-2-D”, Key=“Child-2-D”}
var links = new List<GraphLinksModelLinkData<string, string>>()
new GraphLinksModelLinkData<string, string>(){From=“Child-1-A”, To=“Root”},
new GraphLinksModelLinkData<string, string>(){From=“Child-1-B”, To=“Root”},
new GraphLinksModelLinkData<string, string>(){From=“Child-1-C”, To=“Root”},
new GraphLinksModelLinkData<string, string>(){From=“Child-2-A”, To=“Child-1-A”},
new GraphLinksModelLinkData<string, string>(){From=“Child-2-B”, To=“Child-1-A”},
new GraphLinksModelLinkData<string, string>(){From=“Child-2-C”, To=“Child-1-B”},
new GraphLinksModelLinkData<string, string>(){From=“Child-2-D”, To=“Child-1-C”},
// uncomment to reverse links
// links.ForEach(link => { var tmp = link.From; link.From = link.To; link.To = tmp; });
model.LinksSource = links;
diagram.Model = model;

Ah, sorry, I forgot to mention that you also need to tell the TreeLayout how to figure out the tree structure of the graph: set TreeLayout.Path=“Source”.

Works like a charm! Thank you!! Setting the TreeLayout.Path=“Source” alone makes it layout nice and pretty, but I set the parent go:Diagram’s TreePath=“Source” as well to be safe.

Diagram.TreePath controls other behavior that may involve trees, such as moving and copying and deleting.