Custom RadDiagramConnectors will not connect to each other

[Fredrik]

I have an mvvm style project.
in this i have ComponentDiagramItems that derive from NodeViewModelBase
in the xaml i have set <Setter Property="UseDefaultConnectors" Value="False"/>

then in the ComponentDiagramIItem constructor i add the relevant connectors like this


 public ComponentDiagramItemViewModel(String componentNameIn, Uri imageUri)
            {
                this.ComponentName = componentNameIn;                               
                this.ComponentImage = imageUri;
                
                List<RadDiagramConnector> connectors = new List<RadDiagramConnector>();
                RadDiagramConnector one = new RadDiagramConnector() { Offset = new Point(1, 0.5), Name = "CustomConnector1" };
                one.AllowDrop = true;
                connectors.Add(one);
                RadDiagramConnector two  = new RadDiagramConnector() {Offset = new Point(0,0.5), Name = "CustomConnector2"};
                two.IsManipulationEnabled = true;
                connectors.Add(two);

                this.MyConnectors = connectors;
            }

and in the xaml i bind this property like this

 <primitives:ConnectorsControl ItemsSource="{Binding MyConnectors}"
                                                   ItemContainerStyle="{TemplateBinding ConnectorStyle}"
                                                    x:Name="MyConnectorsControl"
                                                    Visibility="Collapsed"/>

inside my ControlTemplate with TargetType="telerik:RadDiagramShape"


Everything shows upp the way i expect. BUT i cannot connect the shapes with links. if i click on a Connector and start dragging i get a link and when i drag it over another shape that shapes connectors becomes visible. But if i drag my link directly over the connector nothing happens...
 
This is my link class implemenation.

public class Link : LinkViewModelBase<ComponentDiagramItemViewModel>
    {
        public string Id { get; set; }

        public override string ToString()
        {
            return "";
        }
        public Link(ComponentDiagramItemViewModel source, ComponentDiagramItemViewModel target)
        {
            if (source != null) this.Source = source;
            if (target != null) this.Target = target;
        }

    }

and this is my visual state manager


 <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="MouseStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup>
                                            <VisualState x:Name="ConnectorsAdornerVisibilityStates"/>
                                            <VisualState x:Name="ConnectorsAdornerCollapsed"/>
                                            <VisualState x:Name="ConnectorsAdornerVisible">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Duration="0"
                                                                    Storyboard.TargetProperty="Visibility"
                                                                    Storyboard.TargetName="MyConnectorsControl">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

[Fredrik]

i also have an emtpy constructor in my link class it looks like this

public Link()
        {
        }

messed up the copy/paste apparently

[Pavel R. Pavlov]

Hi,

The way that this approach is implemented actually breaks the MVVM pattern. Please note that the ComponentDiagramItemViewModel actually holds a collection of UI elements like the RadDiagramConnectors. In order to stick to the MVVM pattern you can create a class deriving from ObservableCollection<RadDiagramConnector>. This custom collection may be populated in XAML and then used to create the new connectors once the shapes are generated. Furthermore, you can control if this custom collection of connectors will be applied to a specific shape with a property exposed by your ComponentDiagramItemViewModel.

Also, the UseDefaultConnectors should be set to True (or left unchanged). By doing this you will be able to use the RadDiagramShape.Connectors collection to visualize your custom connectors. This approach is demonstrated in the attached project.

However, if you need to customize the connectors, without your code behind to search and access resources defined in XAML you can take a look at the project provided by Zarko in this thread. 

I hope this information is helpful.

Regards,
Pavel R. Pavlov
Telerik