Fixed connector positions?

4 posts, 0 answers
  1. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 31 Jan 2013 Link to this post

    See attached image. We have a button on our diagram nodes that lets us show more details about the node. The UI element expands thanks to some binding tricks in the template. However, as you can see, the connector follows its relative position. We would like to keep the connector at its original position in order to preserve the "arrow structure". If the arrows/connections start jumping around the user gets a little confused. Is this possible?

    I sense that such a functionality requires some advanced template stuff. Please show us an example! Thanks.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Feb 2013 Link to this post

    Hello Kristoffer,

    I see you use the default Bottom Connector of the DiagramShapes. Basically, the four basic connectors are located on the shapes' relative coordinates - (0.5, 0); (0.5,1); (0, 0.5); (1,0.5). When you make the Shape bigger the Bottom connector stays in the middle of the bottom side of the Shape which is expected. This is expected behavior in many other diagramming frameworks as well.

    However, we can suggest you to use custom connectors. You can define custom connector and use it in the "expanded" state of your shape. It's a small question of mathematics to calculate the position of the custom connector but I believe you will be able handle this. When expanding the Shape you have to change the Source of the given connection. You can use the RadDiagramConnection.Attach() method used in the example from the mentioned help article.

    On the other hand, you can try the Gliding Connections, they are demonstrated in our Class Diagram Demo. These connections move around the Shape when the shapes are being moved. Hope you will like this feature.

    Regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Kristoffer
    Kristoffer avatar
    158 posts
    Member since:
    Dec 2012

    Posted 05 Feb 2013 Link to this post

    Thanks. I think I follow.

    But, I'm not sure why we would have to change the source using this Attach method. Isn't it possible to set the connector's position using a style and set its location using the shape's width + a converter?
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Feb 2013 Link to this post

    Hello Kristoffer,

     You are right that setting the Source of the Connection is not the easiest way to handle this scenario. I missed something important to mention. When the Source or Target of the connections is not specified explicitly or via style, the connection will automatically attach to the closest connector. In your case this will work flawlessly if you don't move your shapes. When the first shape becomes wider, the connection will change its source to the custom one (we suppose you have added custom connector ) because it is the closest one. If you move the shapes the connection will change its source/target based on a min-distance logic. If you need to move the shapes, you can set the connection SourceConnectionPosition instead of the Attach method:

    private void RadButton_Click_1(object sender, RoutedEventArgs e)
            {
                this.diagram.Shapes[0].Width = 400;
                this.diagram.Connections[0].SourceConnectorPosition = "CustomConnector";
            }
     
            private void diagram_Loaded_1(object sender, RoutedEventArgs e)
            {
                RadDiagramConnector connector = new RadDiagramConnector();
                connector.Offset = new Point(0.25, 1);
                connector.Name = "CustomConnector";
                this.diagram.Shapes[0].Connectors.Add(connector);
            }
    Please check out the suggested approach in the attached solution and let us know if it is suitable for you or not. We think code behind is better in this case instead of binding to ActualWidth of the Shape with Converter. 

    Greetings,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top