This is a migrated thread and some comments may be shown as answers.

Different orientation for container layout

6 Answers 264 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Edgars
Top achievements
Rank 1
Edgars asked on 21 Jul 2014, 07:59 AM
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?

6 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 24 Jul 2014, 06:18 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Edgars
Top achievements
Rank 1
answered on 24 Jul 2014, 07:01 AM
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".
0
Pavel R. Pavlov
Telerik team
answered on 29 Jul 2014, 06:07 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Edgars
Top achievements
Rank 1
answered on 29 Jul 2014, 06:35 AM
Thank you for investigating, Pavel. If this is not possible at the moment, I'll see what other solutions/libraries I could use.
0
Accepted
Pavel R. Pavlov
Telerik team
answered on 29 Jul 2014, 07:51 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Edgars
Top achievements
Rank 1
answered on 29 Jul 2014, 08:00 AM
Ok, that sort of worked, thank you. This is how it looks: Image.
Tags
Diagram
Asked by
Edgars
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Edgars
Top achievements
Rank 1
Share this question
or