Custom RadDiagramConnectors will not connect to each other

3 posts, 0 answers
  1. Fredrik
    Fredrik avatar
    6 posts
    Member since:
    Aug 2014

    Posted 23 Sep 2014 Link to this post

    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;
                    RadDiagramConnector two  = new RadDiagramConnector() {Offset = new Point(0,0.5), Name = "CustomConnector2"};
                    two.IsManipulationEnabled = true;

                    this.MyConnectors = connectors;

    and in the xaml i bind this property like this

     <primitives:ConnectorsControl ItemsSource="{Binding MyConnectors}"
                                                       ItemContainerStyle="{TemplateBinding ConnectorStyle}"

    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

                                            <VisualStateGroup x:Name="MouseStates">
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver"/>
                                                <VisualState x:Name="ConnectorsAdornerVisibilityStates"/>
                                                <VisualState x:Name="ConnectorsAdornerCollapsed"/>
                                                <VisualState x:Name="ConnectorsAdornerVisible">
                                                        <ObjectAnimationUsingKeyFrames Duration="0"
                                                            <DiscreteObjectKeyFrame KeyTime="0">
  2. Fredrik
    Fredrik avatar
    6 posts
    Member since:
    Aug 2014

    Posted 23 Sep 2014 in reply to Fredrik Link to this post

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

    public Link()

    messed up the copy/paste apparently
  3. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1236 posts

    Posted 24 Sep 2014 Link to this post


    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.

    Pavel R. Pavlov
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Back to Top