Auto-layout causes diagram to be upside down

4 posts, 0 answers
  1. Christopher
    Christopher avatar
    5 posts
    Member since:
    Aug 2012

    Posted 01 Jun 2012 Link to this post

    When we use the auto-layout functionality in our application our diagram ends up upside down. The code we are using for adding shapes and connectors is below. Any ideas on how to make the layout start with our start block on top and then layout downward. I tried added the End block after the start and that did not fix it. Are there any other layouts we can try?

    private void PopulateDiagram()
            {
                processingDiagram.Clear();
     
                RadDiagramShape ppEnd = new RadDiagramShape()
                {
                    Content = "End",
                    Width = 100,
                    Height = 50,
                    Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape)
                };
                processingDiagram.AddShape(ppEnd);
     
                RadDiagramShape ppStart = new RadDiagramShape()
                {
                    ContentTemplate = Resources["PreprocessingStartTemplate"] as DataTemplate,
                    Width = 100,
                    Height = 50,
                    Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.CloudShape)
                };
                processingDiagram.AddShape(ppStart);
     
                foreach (PreprocessorSegment segment in SelectedEngine.PreprocessorSegments)
                {
                    RadDiagramShape segmentStart = new RadDiagramShape()
                    {
                        Content = segment.Node,
                        Width = 100,
                        Height = 50,
                        Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape)
                    };
                    processingDiagram.AddShape(segmentStart);
     
                    RadDiagramConnection connection = new RadDiagramConnection()
                    {
                        Source = ppStart,
                        SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                        Target = segmentStart,
                        TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                    };
                    processingDiagram.AddConnection(connection);
     
                    List<string> unusedOutputs = new List<string>();
                    Dictionary<string, RadDiagramShape> outputShapes = new Dictionary<string, RadDiagramShape>();
                    Dictionary<PreprocessorAlgorithmInstance, RadDiagramShape> algShapes = new Dictionary<PreprocessorAlgorithmInstance, RadDiagramShape>();
                    foreach (PreprocessorAlgorithmInstance alg in segment.Algorithms)
                    {
                        RadDiagramShape algShape = new RadDiagramShape()
                        {
                            Content = alg,
                            ContentTemplate = Resources["PreprocessingAlgorithmInstanceTemplate"] as DataTemplate,
                            Width = 100,
                            Height = 50,
                            Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.RectangleShape)
                        };
     
                        unusedOutputs.Add(alg.Output);
                        outputShapes[alg.Output] = algShape;
                        algShapes[alg] = algShape;
                        processingDiagram.AddShape(algShape);
                    }
     
                    // Connections from Inputs to Outputs.
                    foreach (PreprocessorAlgorithmInstance alg in segment.Algorithms)
                    {
                        foreach (string input in alg.Inputs)
                        {
                            if (outputShapes.ContainsKey(input))
                            {
                                RadDiagramConnection cn = new RadDiagramConnection()
                                {
                                    Content = input,
                                    Source = outputShapes[input],
                                    SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                                    Target = algShapes[alg],
                                    TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                                    TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                                };
                                processingDiagram.AddConnection(cn);
                                unusedOutputs.Remove(input);
                            }
                            else
                            {
                                RadDiagramConnection cn = new RadDiagramConnection()
                                {
                                    Content = input,
                                    Source = segmentStart,
                                    SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                                    Target = algShapes[alg],
                                    TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                                    TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                                };
                                processingDiagram.AddConnection(cn);
                            }
                        }
                    }
     
                    foreach (string output in unusedOutputs)
                    {
                        RadDiagramConnection cn = new RadDiagramConnection()
                        {
                            Content = output,
                            Source = outputShapes[output],
                            SourceConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Bottom,
                            Target = ppEnd,
                            TargetConnectorPosition = Telerik.Windows.Diagrams.Core.ConnectorPosition.Top,
                            TargetCapType = Telerik.Windows.Diagrams.Core.CapType.Arrow1Filled
                        };
                        processingDiagram.AddConnection(cn);
                    }
                }
     
                processingDiagram.Layout();
            }
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 04 Jun 2012 Link to this post

    Hi,

     We are currently using a generic algorithm, which does not support modifying the orientation of the layout. However, for Q2 2012, we are providing a lot of customizations to the layout algorithm (i.e. TopDown, LeftRight, etc.) so you will be able to achieve oriented layout. So stay tuned for the release, which is just around the corner.

    Regards,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Nazli
    Nazli avatar
    1 posts
    Member since:
    Aug 2014

    Posted 31 Oct 2014 Link to this post

    Hello,

    I am also getting the same result for my RadDiagram after using AutoLayout. I want the orgChart to be in a top-down approach rather then bottom-up. Is there any way I can keep using AutoLayout property while indicating it to be in a top-down layout?

    Sincerely,
  5. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 04 Nov 2014 Link to this post

    Hi Nazli,

    You can take a look at our Layout SDK example where shapes layout, different layout types and customizing the layout with properties are demonstrated.

    Hope this helps.

    Regards,
    Peshito
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top