Adding Custom Connectors in XAML style

7 posts, 1 answers
  1. AshR
    AshR avatar
    16 posts
    Member since:
    Jan 2015

    Posted 24 Feb 2015 Link to this post

    In the documentation all custom connectors are added in code behind http://docs.telerik.com/devtools/wpf/controls/raddiagram/features/custom-connectors.html

    I have also seen custom connectors added to individual raddiagramshape in xaml as :-

    <telerik:RadDiagramShape Content="2"
                             Position="300 100"
                             UseDefaultConnectors="False">
        <telerik:RadDiagramShape.Connectors>
            <telerik:RadDiagramConnector Name="TopLeft"
                                         Offset="1 0.33" />      
        </telerik:RadDiagramShape.Connectors>
    </telerik:RadDiagramShape>

    However I use MVVM model and a shape style selector and do not have direct access. I cannot set 'Connectors' in a style using 'Settter Property=' because the connectors collection only has a get accessor. 

    Is there a way to add custom connectors to a raddiagramshape in the XAML style?


    telerik:RadDiagramShape Content="2"
                             Position="300 100"
                             UseDefaultConnectors="False">
        <telerik:RadDiagramShape.Connectors>
            <telerik:RadDiagramConnector Name="Left"
                                         Tag="Connector 1"
                                         Offset="0 0.5" />
            <telerik:RadDiagramConnector Name="Top"
                                         Tag="Connector 2"
                                         Offset="0.5 0" />
            <telerik:RadDiagramConnector Name="Right"
                                         Tag="Connector 3"
                                         Offset="1 0.5" />
            <telerik:RadDiagramConnector Name="Bottom"
                                         Tag="Connector 4"
                                         Offset="0.5 1" />
            <telerik:RadDiagramConnector Name="Auto"
                                         Tag="Connector 5"
                                         Offset="0.5 0.5" />
        </telerik:RadDiagramShape.Connectors>
    </telerik:RadDiagramShape>
    <telerik:RadDiagramShape Content="2"
                             Position="300 100"
                             UseDefaultConnectors="False">
        <telerik:RadDiagramShape.Connectors>
            <telerik:RadDiagramConnector Name="Left"
                                         Tag="Connector 1"
                                         Offset="0 0.5" />
            <telerik:RadDiagramConnector Name="Top"
                                         Tag="Connector 2"
                                         Offset="0.5 0" />
            <telerik:RadDiagramConnector Name="Right"
                                         Tag="Connector 3"
                                         Offset="1 0.5" />
            <telerik:RadDiagramConnector Name="Bottom"
                                         Tag="Connector 4"
                                         Offset="0.5 1" />
            <telerik:RadDiagramConnector Name="Auto"
                                         Tag="Connector 5"
                                         Offset="0.5 0.5" />
        </telerik:RadDiagramShape.Connectors>
    </telerik:RadDiagramShape>
    <telerik:RadDiagramShape Content="2"
                             Position="300 100"
                             UseDefaultConnectors="False">
        <telerik:RadDiagramShape.Connectors>
            <telerik:RadDiagramConnector Name="Left"
                                         Tag="Connector 1"
                                         Offset="0 0.5" />
            <telerik:RadDiagramConnector Name="Top"
                                         Tag="Connector 2"
                                         Offset="0.5 0" />
            <telerik:RadDiagramConnector Name="Right"
                                         Tag="Connector 3"
                                         Offset="1 0.5" />
            <telerik:RadDiagramConnector Name="Bottom"
                                         Tag="Connector 4"
                                         Offset="0.5 1" />
            <telerik:RadDiagramConnector Name="Auto"
                                         Tag="Connector 5"
                                         Offset="0.5 0.5" />
        </telerik:RadDiagramShape.Connectors>
    </telerik:RadDiagramShape>
  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 25 Feb 2015 Link to this post

    Hello Ashley Rolleston,

    In order to add your own connectors using MVVM you will need to create an Attached property to the RadDiagramShape and bind its Value to a collection from your ViewModel. In the attached property you have direct access to the shape and its Connectors collection and you could add the new connections to the collection. Also you could choose to either ignore or use the default five connectors using the UseDefaultConnectors property of the shape.

    I have attached a sample project for your convenience demonstrating the approach. Please let us know if you need further assistance.

    Regards,
    Kiril Vandov
    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. AshR
    AshR avatar
    16 posts
    Member since:
    Jan 2015

    Posted 26 Feb 2015 in reply to Kiril Vandov Link to this post

    Thanks for the reply Kiril,

    I can't see the attached sample project you mentioned?
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 26 Feb 2015 Link to this post

    Hello Ashley,

    It seems that something went wrong with the file upload. I have re-uploaded the solution and you should see it now.

    Regards,
    Pavel R. Pavlov
    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.

     
  6. AshR
    AshR avatar
    16 posts
    Member since:
    Jan 2015

    Posted 27 Feb 2015 Link to this post

    Thank you for your assistance.
  7. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 26 Jun 2015 in reply to Pavel R. Pavlov Link to this post

    Hallo Pavel,

     

    I'd like to ask you if there is some difference in this scenario if i would like to use it with RadDiagramContainerShape. I've tried in my project and also in your scenario and it does not work. Could you be so kind and give me some advices how to use custom connectors through attached property on your sample project? 

     

    Thank you very much for your time
    Greetings Jakub

  8. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 26 Jun 2015 in reply to Pavel R. Pavlov Link to this post

    Hi Pavel,

     

    problem solved sorry for spam:)

     

    Have a nice day.

    Jakub

Back to Top
UI for WPF is Visual Studio 2017 Ready