Adding Custom Connectors in XAML style

[AshR]

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>

[Kiril Vandov]

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

 

 

[AshR]

Thanks for the reply Kiril,

I can't see the attached sample project you mentioned?

[Pavel R. Pavlov]

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

 

 

[AshR]

Thank you for your assistance.

[Jakub]

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

[Jakub]

Hi Pavel,

 

problem solved sorry for spam:)

 

Have a nice day.

Jakub