Different orientation for container layout

7 posts, 1 answers
  1. Edgars
    Edgars avatar
    4 posts
    Member since:
    Jul 2014

    Posted 21 Jul 2014 Link to this post

    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?
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 24 Jul 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Edgars
    Edgars avatar
    4 posts
    Member since:
    Jul 2014

    Posted 24 Jul 2014 in reply to Pavel R. Pavlov Link to this post

    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".
  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 Jul 2014 Link to this post

    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.
     
  6. Edgars
    Edgars avatar
    4 posts
    Member since:
    Jul 2014

    Posted 29 Jul 2014 in reply to Pavel R. Pavlov Link to this post

    Thank you for investigating, Pavel. If this is not possible at the moment, I'll see what other solutions/libraries I could use.
  7. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 Jul 2014 Link to this post

    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.
     
  8. Edgars
    Edgars avatar
    4 posts
    Member since:
    Jul 2014

    Posted 29 Jul 2014 in reply to Pavel R. Pavlov Link to this post

    Ok, that sort of worked, thank you. This is how it looks: Image.
Back to Top
UI for WPF is Visual Studio 2017 Ready