Reverse TreeLayout?

GoXam
#1

Hello,


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.

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?

#2

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”.

#3

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”
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
Title=“MainWindow” Height=“350” Width=“525” xmlns:go=“http://schemas.nwoods.com/GoXam”>

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

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()
{
InitializeComponent();
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;
}
}
}

#4

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”.

#5

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.

#6

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