Add connection point with 1 click and without ctrl key pressed

3 posts, 1 answers
  1. Diego
    Diego avatar
    13 posts
    Member since:
    Aug 2012

    Posted 22 Mar 2016 Link to this post


    I need to add connection points to a certain connection and i need to do it with a single click and without the 'ctrl' key pressed. I've tried the AddConnectionPoint method but is not giving us the expected behavior  (apparently the points need to be added in some specific order). This is my code:

    1.void Connection_MouseDown(object sender, MouseButtonEventArgs e)
    3.     RadDiagramConnection Connection = sender as RadDiagramConnection;
    5.     var transformedPoint = this.diagram.GetTransformedPoint(Mouse.GetPosition(this.diagram));
    7.     Connection.AddConnectionPoint(e.MouseDevice.GetPosition(this.diagram));         

    I've tried this aswell:

    01.void Connection_MouseDown(object sender, MouseButtonEventArgs e)
    03.       RadDiagramConnection Connection = sender as RadDiagramConnection;
    05.       var transformedPoint = this.diagram.GetTransformedPoint(Mouse.GetPosition(this.diagram));
    06.       Connection.AddConnectionPoint(e.MouseDevice.GetPosition(this.diagram));
    08.       IList<Point> connPoints = Connection.ConnectionPoints.OrderBy(c => c.X).OrderBy(c => c.Y).ToList();
    10.       Connection.ConnectionPoints.Clear();
    11.       foreach (Point point in connPoints)
    12.       {
    13.           Connection.AddConnectionPoint(point);
    14.       }   

    When i start to make points with one single click, this happens (Attached image).  

    We need to add connection points the same way we do with they ctrl key pressed. But without the 'ctrl' key pressed.

    Thank you



  2. Answer
    Petar Mladenov
    Petar Mladenov avatar
    2991 posts

    Posted 25 Mar 2016 Link to this post

    Hi Diego,

    I am sending you a possible approach you can use. Basically this pretty much what the diagram does internally. It calculates the index at which the connection point should be inserted.

    public MainWindow()
                this.AddHandler(RadDiagramConnection.MouseLeftButtonDownEvent, new MouseButtonEventHandler(RadDiagramConnection_MouseDown_1), true);
            private void RadDiagramConnection_MouseDown_1(object sender, System.Windows.Input.MouseButtonEventArgs e)
                FrameworkElement element = e.OriginalSource as FrameworkElement;
                if (element == null)
                RadDiagramConnection connection = element.ParentOfType<RadDiagramConnection>();
                if (connection == null)
                this.AddPoint(connection, e.MouseDevice.GetPosition(this.diagram));
            private void AddPoint(RadDiagramConnection connection, Point p)
                var points = new List<Point>(connection.ConnectionPoints);
                points.Insert(0, connection.StartPoint);
                var oldIsModified = connection.IsModified;
                var spot = new Rect(new Point(p.X - 8, p.Y - 8), new Size(16, 16));
                var index = spot.IntersectsLineAtIndex(points);
                if (index > -1)
                    var oldPoints = connection.ConnectionPoints.Clone();
                    var newPoints = connection.ConnectionPoints.Clone();
                    newPoints.Insert(index, p);
                    var command = new UndoableDelegateCommand(CommandNames.ModifyConnectionConnectionPoints,
                        x =>
                            connection.IsModified = true;
                        x =>
                            connection.IsModified = oldIsModified;

    However, I want to note 2 differences with the built-in adding of connection points:
    -- by default, the connection  should be first selected before using Ctrl + Mouse Down over it
    -- there is a tolerance 10 px around the connection. But in your case you rely on mouse down exactly on the connection which by default is 1-2 px wide - this might be frustrating for your users.

    Petar Mladenov
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. Diego
    Diego avatar
    13 posts
    Member since:
    Aug 2012

    Posted 28 Mar 2016 in reply to Petar Mladenov Link to this post

    Thank yo very much Petar, this works perfect for me. I only have to validate that the RadDiagramConnection IsSelected. Thanks again.
Back to Top