In the RadDiagram how do I get auto-layouted items to align horizontally instead of vertically?

[Lukas]

I have a RadDiagram to which I bind a IGraphSource that contains some Items and Links. I'm just following the examples from Telerik documentation for everything, I have a default RadDiagram defined in my XAML and I set up some custom styles for the Shape and Connection.

Even if i make sure the ConnectorPositions are set up to connect to the Right and Left of the shapes, I can not figure out how to have items automatically align horizontally instead of vertically.

Here is how they align by default:

 

Here is how I want them to (automatically) align - left to right, horizontally:

How can I achieve a horizontal layout like this with dynamic data binding?

 

Thanks!

[Dilyan Traykov]

Hello Lukas,

Thank you for the provided image.

I believe you can use the TreeLayout feature of the RadDiagram control to achieve the expected result. For the purpose, you need to set the TreeLayoutType property of the TreeLayoutSettings to TreeRight:

            var settings = new TreeLayoutSettings
            {
                TreeLayoutType = TreeLayoutType.TreeRight
            };
            var layout = new TreeLayout();
            layout.Layout(this.diagram, settings);
            this.diagram.AutoFit();

You can have a look at the Layout demo from our SDK Samples Browser to test different configurations of the layout. For your convenience, I've attached the source code of the demo to my reply.

Please let me know if you find this helpful.

Regards,
Dilyan Traykov
Progress Telerik