GraphSharp Tree Layout LeftToRight

Question

I try to create a Tree with GraphSharp from CodePlex.

I looked at the Sample Application and try to "re engineer" the example.

The problem is, if I try to set the LayoutAlgorithmType = "Tree" programmatically I get a TargetInvocationException... that is mysterious because in the example it works.

My question is: how to create a Graph with Tree Layout and orientation from Left to Right.

Thanks in advance :)

My code:

public partial class MainWindow : Window
{
    private IBidirectionalGraph<object, IEdge<object>> _graphToVisualize;

    public IBidirectionalGraph<object, IEdge<object>> GraphToVisualize
    {
        get { return _graphToVisualize; }
    }

    public MainWindow()
    {
        CreateGraphToVisualize();

        InitializeComponent();
    }

    private void CreateGraphToVisualize()
    {
        var g = new BidirectionalGraph<object, IEdge<object>>();



        string[] vs = new string[5];
        for (int i = 0; i < 5; i++)
        {
            vs[i] = i.ToString();
            g.AddVertex(vs[i]);
        }

        //add some edges
        g.AddEdge(new Edge<object>(vs[0], vs[1]));
        g.AddEdge(new Edge<object>(vs[0], vs[2]));
        g.AddEdge(new Edge<object>(vs[2], vs[3]));
        g.AddEdge(new Edge<object>(vs[1], vs[4]));
        g.AddEdge(new Edge<object>(vs[3], vs[4]));

        layout.LayoutMode = LayoutMode.Automatic;
        layout.LayoutAlgorithmType = "Tree";

        _graphToVisualize = g;

    }
}

xaml:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:graphsharp="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:GraphSharp_Controls="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:graph="clr-namespace:GraphSharp.Controls;assembly=GraphSharp.Controls"
        xmlns:Controls="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions"

        Title="MainWindow" Height="350" Width="525"
        x:Name="root">

    <Grid>
        <Controls:ZoomControl>
            <graph:GraphLayout x:Name="layout" />
        </Controls:ZoomControl>

    </Grid>
</Window>

Answer 1

In code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void root_Loaded(object sender, RoutedEventArgs e)
    {
        CreateGraphToVisualize();
    }

    private void CreateGraphToVisualize()
    {
        var g = new BidirectionalGraph<object, IEdge<object>>();
        string[] vs = new string[5];
        for (int i = 0; i < 5; i++)
        {
            vs[i] = i.ToString();
            g.AddVertex(vs[i]);
        }

        //add some edges
        g.AddEdge(new Edge<object>(vs[0], vs[1]));
        g.AddEdge(new Edge<object>(vs[0], vs[2]));
        g.AddEdge(new Edge<object>(vs[2], vs[3]));
        g.AddEdge(new Edge<object>(vs[1], vs[4]));
        g.AddEdge(new Edge<object>(vs[3], vs[4]));

        //Simple Tree layout parameter variable
        GraphSharp.Algorithms.Layout.Simple.Tree.SimpleTreeLayoutParameters simpleTreeLayoutParameters = new GraphSharp.Algorithms.Layout.Simple.Tree.SimpleTreeLayoutParameters();
        //Simple Tree layout parameter variable values
        simpleTreeLayoutParameters.Direction = GraphSharp.Algorithms.Layout.LayoutDirection.LeftToRight; //THIS IS WHAT YOU EXPECT
        simpleTreeLayoutParameters.LayerGap = 10.0;
        simpleTreeLayoutParameters.OptimizeWidthAndHeight = false;
        simpleTreeLayoutParameters.SpanningTreeGeneration = GraphSharp.Algorithms.Layout.Simple.Tree.SpanningTreeGeneration.DFS;
        simpleTreeLayoutParameters.VertexGap = 10.0;
        simpleTreeLayoutParameters.WidthPerHeight = 2.0;
        //Set layout
        layout.LayoutAlgorithmType = "Tree";
        layout.LayoutParameters = simpleTreeLayoutParameters;
        layout.LayoutMode = LayoutMode.Automatic;
        layout.Graph = g;
    }
}

Answer 2

After looking at the sourcecode of the graph# lib, I found a solution by myself.

At first you have to add the LayoutAlgorithm to your namespace:

xmlns:tree="clr-namespace:GraphSharp.Algorithms.Layout.Simple.Tree;assembly=GraphSharp"

After that you can add additional LayoutParameter to your GraphLayout. In my case I simply changed the direction of the Tree from TopToBottom to LeftToRight.

<graphsharp:GraphLayout x:Name="graphLayout"
                                Graph="{Binding ElementName=root,Path=GraphToVisualize}"
                                LayoutAlgorithmType="Tree"
                                OverlapRemovalAlgorithmType="FSA"
                                HighlightAlgorithmType="Simple" RenderTransformOrigin="0.5,0.5">
            <graphsharp:GraphLayout.LayoutParameters>
                <tree:SimpleTreeLayoutParameters Direction="LeftToRight"></tree:SimpleTreeLayoutParameters>
            </graphsharp:GraphLayout.LayoutParameters>
        </graphsharp:GraphLayout>

So if you want to change a Parameter of a graph you have to look at ( e.g. in Solution Explorer of Visual Studio ) Algorithms .->Layout->Simple->Tree -> SimpleTreeLayoutParameters in my case.