add link programmaticaly and specify connector

6 posts, 0 answers
  1. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 26 Sep Link to this post

    Hi,

     

    I would like create a link programmaticaly with a shape and i would like to specify connector for source and target.

    Capture1 is what a want

    Capture2 is what i have actually

  2. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 29 Sep Link to this post

    Hi nicolas,

    To change the source/target connector of a connection you can set the SourceConnectorPosition/TargetConnectorPosition property of the connection. These properties are further described in the Connections help article in our documentation.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 02 Oct Link to this post

    Hi Dinko,

    Thanks for your answer, now i can add link programmaticaly for my shape (with special connectors) but that's not working for others

    This is my code :

    LinkModel.cs
    public class LinkModel : LinkViewModelBase<NodeViewModelBase>  {
    ...   
    private string _sourceConnectionName;
    public string SourceConnectionName
    {
        get { return _sourceConnectionName; }
        set
        {
            _sourceConnectionName = value;
            OnPropertyChanged("SourceConnectionName");
        }
    }
     
    private string _targetConnectionName;
    public string TargetConnectionName
    {
        get { return _targetConnectionName; }
        set
        {
            _targetConnectionName = value;
            OnPropertyChanged("TargetConnectionName");
        }
    }
    ...

     

    Because i use a GraphSource i should create targetConnectionName and sourceConnectionName properties for my LinkViewModelBase. My properties are binding to my style

    Resources :
    <core:ConnectorCollection x:Key="customConnectors">
        <telerik:RadDiagramConnector x:Name="Left" Offset="0 0.5" />
        <telerik:RadDiagramConnector x:Name="Right" Offset="1 0.5" />
        <telerik:RadDiagramConnector x:Name="Auto"
                                        Opacity="0"
                                        Offset="0.5 0.5" />
    </core:ConnectorCollection>
     
    <core:ConnectorCollection x:Key="networkConnectors">
        <telerik:RadDiagramConnector x:Name="LeftNetwork" Offset="0 0.5" />
        <telerik:RadDiagramConnector x:Name="RightNetwork" Offset="1 0.5" />
    </core:ConnectorCollection>
     
     
    <Style x:Key="rowStyle" TargetType="entity:RowShape">
        ...
        <Setter Property="entity:AttachedProperties.CustomConnectors" Value="{StaticResource customConnectors}" />
        ...
    </Style>
     
    <Style x:Key="rowNetworkStyle" BasedOn="{StaticResource rowStyle}" TargetType="entity:RowShape">
        <Setter Property="entity:AttachedProperties.CustomConnectors" Value="{StaticResource networkConnectors}" />
    </Style>
     
    <Style BasedOn="{StaticResource RadDiagramConnectionStyle}" TargetType="telerik:RadDiagramConnection">
        ...
        <Setter Property="SourceConnectorPosition" Value="{Binding SourceConnectionName}" />
        <Setter Property="TargetConnectorPosition" Value="{Binding TargetConnectionName}" />
        ...
    </Style>

     

    and this how i create my special container and shape

    Add entity with connection :
    var _eNetwork = new TableModel() { ZIndex = GetCurrentZIndex() };
    DiagramGraphSource.AddNode(_eNetwork);
    RowNetworkModel _eRow = new RowNetworkModel() {};
    _eNetwork.AddItem(_eRow);
    var _link = new LinkModel() { Source = _eRow, SourceConnectionName = "LeftNetwork", Target = _eRow, TargetConnectionName = "RightNetwork" };
    DiagramGraphSource.AddLink(_link);

     

    but now i have an error for my others "normal" link (see capture)

    thanks for your help

  4. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 05 Oct Link to this post

    Hi Nicolas,

    You are getting this error because the SourceConnectionName/TargetConnectionName property is null. Using only the provided code snippet I am not sure what is exactly the reason behind this because some of the objects in the code snippet are missing. 

    In MVVM scenario if you want to add custom connectors you need to create an Attached property to the RadDiagramShape and bind its Value to a collection from your ViewModel. Looking at the provided code snippet I am assuming that you have already done this. I have modified the project from this forum thread (which similar behavior was discussed) to test your scenario and it is working on my side. You can find the project attached to this reply. Can you give it a try and let me know if I am missing something from your implementation.

    Also in the project, more specifically in the MainViewModel class, you can observe that I am creating a connection and setting its SourceConnectionName/TargetConnectionName property to a custom connector Name.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 10 Oct in reply to Dinko Link to this post

    Thanks for your help, with your exemple its more understandable.

    But i still have the same problem : if i want to add a link with my mouse (after code initialisation), the program crash with error : "Connector '' doesnt exist". Its just like he couldn't find the connector name.

    Could you help me ?

    Thanks

    Nicolas

  6. Dinko
    Admin
    Dinko avatar
    415 posts

    Posted 5 days ago Link to this post

    Hi nicolas,

    I have further examined this behavior. Internally, in code, the diagram except that the SourceConnectorPosition and TargetConnectorPosition properties have default values. To workaround this behavior you can set the Mode binding in the implicit style to TwoWay and set the SourceConnectionName and TargetConnectionName to ConnectorPosition.Auto in the constructor of the Link.
    <Style  TargetType="telerik:RadDiagramConnection">
        <Setter Property="SourceConnectorPosition" Value="{Binding SourceConnectionName,Mode=TwoWay}" />
        <Setter Property="TargetConnectorPosition" Value="{Binding TargetConnectionName,Mode=TwoWay}" />        
    </Style>
    public Link()
    {
        this.SourceConnectionName = ConnectorPosition.Auto;
        this.TargetConnectionName = ConnectorPosition.Auto;
    }

    I have modified the project to demonstrate this approach.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top