Different orientation for container layout

[Edgars]

I'm calling the following method on my diagram after I've programmatically added the items:

            myDiagram.LayoutAsync(settings: new SugiyamaSettings {
                LayoutContainerChildren = true,
                Orientation = Telerik.Windows.Diagrams.Core.Orientation.Vertical
            });

However, I have several containers, and I'd like the items inside them to be oriented horizontally. How can I achieve this?

[Pavel R. Pavlov]

Hi Edgars,

You are on the right way when you are using the Layout feature of the RadDiagram. Please note that in order to use the default feature, you need to create connected graph that has no infinite loops and has only one root element.

For your convenience I prepared a sample project demonstrating the default layout settings. The project targets Silverlight but our RadDiagram component shares the same code and the usage of the demonstrated feature is the same in WPF.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Edgars]

Thank you for the reply, however, I'm still not able to get the desired result.

I've converted the project to a WPF application. Consider the following RadDiagram content:
       

<telerik:RadDiagramContainerShape>
    <telerik:RadDiagramShape Name="Shape1" Content="1" />
    <telerik:RadDiagramShape Name="Shape2" Content="2" />
    <telerik:RadDiagramConnection Source="{Binding ElementName=Shape1}" Target="{Binding ElementName=Shape2}" />
    <telerik:RadDiagramConnection Source="{Binding ElementName=Shape1}" Target="{Binding ElementName=Shape3}" />
</telerik:RadDiagramContainerShape>
<telerik:RadDiagramContainerShape>
    <telerik:RadDiagramShape Name="Shape3" Content="1" />
</telerik:RadDiagramContainerShape>

This is how it's laid out after I press the button: Image
This is how I want it to look: Image

So the containers are laid out "Vertically", but the shapes inside them "Horizontally".

[Pavel R. Pavlov]

Hi Edgars,

Let me clarify that I understand your requirement correctly. Actually you need to layout the RadDiagramContainerShapes with one settings of the Layout feature and additionally you need to layout all other shapes with other layout settings. 

Unfortunately, this is not supported out of the box. You are allowed to define only one Layout algorithm for all shapes (both containers and shapes). You can specify if the routing algorithm will be also applied to the shapes inside containers (LayoutContainerChildren) but there is no option to force the default algorithms to be applied only to the shapes and not to the containers (at the same time).

We will further investigate the possibility to apply several the different layout algorithms one after another. But it is most likely that a custom layout will be needed in your particular case. We will contact you again with more information.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Edgars]

Thank you for investigating, Pavel. If this is not possible at the moment, I'll see what other solutions/libraries I could use.

[Pavel R. Pavlov]

Hello Edgars,

Could you please try to layout the shapes twice. The first time with the prefered settings for laying out the shapes inside the containers with the LayoutContainerChildren set to True. The second time with the prefered settings for laying out the containers with the LayoutContainerChildren set to False.

If you define these shapes:

<telerik:RadDiagramContainerShape>
    <telerik:RadDiagramShape Name="Shape1" Content="1" />
    <telerik:RadDiagramShape Name="Shape2" Content="2" />
    <telerik:RadDiagramConnection Source="{Binding ElementName=Shape1}" Target="{Binding ElementName=Shape2}" />
    <telerik:RadDiagramConnection Source="{Binding ElementName=Shape2}" Target="{Binding ElementName=Shape3}" />
</telerik:RadDiagramContainerShape>
<telerik:RadDiagramContainerShape>
    <telerik:RadDiagramShape Name="Shape3" Content="3" />
</telerik:RadDiagramContainerShape>

You can try using the following code to layout the shapes:

private void RadButton_Click(object sender, RoutedEventArgs e)
{
    SugiyamaSettings settings = new SugiyamaSettings()
    {
        HorizontalDistance = 50,
        VerticalDistance = 20,
        LayoutContainerChildren = true,
        Orientation = Telerik.Windows.Diagrams.Core.Orientation.Horizontal,
        TotalMargin = new Size(20, 20),
        ShapeMargin = new Size(10, 10),
    };
    this.diagram.Layout(LayoutType.Sugiyama, settings);

    settings = new SugiyamaSettings()
    {
        HorizontalDistance = 50,
        VerticalDistance = 20,
        LayoutContainerChildren = false,
        Orientation = Telerik.Windows.Diagrams.Core.Orientation.Vertical,
        TotalMargin = new Size(20, 20),
        ShapeMargin = new Size(10, 10),
    };
    this.diagram.Layout(LayoutType.Sugiyama, settings);
}

Please give this suggestion a try and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Edgars]

Ok, that sort of worked, thank you. This is how it looks: Image.