Connection template

2 posts, 0 answers
  1. Manuel
    Manuel avatar
    32 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    Hi guys I'm trying to draw a diagram like this one: http://www.wu.ac.at/ic/erp/webtrainer/dwh_webtrainer/exercise/20/20d-l-1.gif

    Actually the only thing I really can't figure out is how to customize the connection template in order to draw an orthogonal line on top of a link (see the connection from the grayed node to the "driver" node).

    The presence (or absence) of the line should be driven by a property in my model (the entire diagram is data bound to a graph source).

    Thank you
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 01 Nov 2013 Link to this post

    Hello Manuel,

    In order to achieve your requirement you can create a class deriving from RadDiagramConnection. After that you can override the UpdateGeometryOverride() method. In that method you will be able to customize the Data property of the Path component used to draw the connection.

    Furthermore, you can gain access to that component by overriding the OnApplyTemplate() method and instantiating the component. You can use similar to this code:

    public class CustomConnection : RadDiagramConnection
    {
        private Path geometryPath;
     
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            this.geometryPath = this.GetTemplateChild("GeometryPath") as Path;
        }
     
        protected override void UpdateGeometryOverride()
        {
            if (this.geometryPath != null)
            {
                var newGeometry = new GeometryGroup();
        //Sample code
                //var xLenght = Math.Abs(this.StartPoint.X - this.EndPoint.X);
                //var yLenght = Math.Abs(this.StartPoint.Y - this.EndPoint.Y);
                //newGeometry.Children.Add(new LineGeometry(this.StartPoint, this.EndPoint));
                //newGeometry.Children.Add(new LineGeometry( new Point(xLenght * 2 / 3, yLenght / 2),new Point(xLenght / 2, yLenght * 2 / 3)));
     
                this.geometryPath.Data = newGeometry;
            }
        }
    }
    When you implement the custom logic drawing the connection, you will need to force the RadDiagram to use your custom connection instead of the default one. You can do this by subclassing the RadDiagram and overriding the IsItemItsOwnConnectionContainerOverride() and GetConnectionContainerForItemOverride() methods. You can use the following snippet:

    public class MyDiagram:RadDiagram
    {
        protected override bool IsItemItsOwnConnectionContainerOverride(object item)
        {
            return item is CustomConnection;
        }
     
        protected override Telerik.Windows.Diagrams.Core.IConnection GetConnectionContainerForItemOverride(object item)
        {
            return new CustomConnection();
        }
    }
    Please give this approach a try and let us know if you need any further assistance.

    Regards,
    Pavel R. Pavlov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top