This is a migrated thread and some comments may be shown as answers.

Custom RadDiagramConnectors will not connect to each other

2 Answers 92 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Fredrik
Top achievements
Rank 1
Fredrik asked on 23 Sep 2014, 12:20 PM
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>

2 Answers, 1 is accepted

Sort by
0
Fredrik
Top achievements
Rank 1
answered on 23 Sep 2014, 12:57 PM
i also have an emtpy constructor in my link class it looks like this

public Link()
        {
        }

messed up the copy/paste apparently
0
Pavel R. Pavlov
Telerik team
answered on 24 Sep 2014, 11:09 AM
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
 
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.
 
Tags
Diagram
Asked by
Fredrik
Top achievements
Rank 1
Answers by
Fredrik
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or