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

Custom connections to MVVM

1 Answer 83 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Yuanhong asked on 18 Nov 2019, 08:46 AM


    I created a project that wanted to implement custom connections and implemented mvvm. But I ran into a problem, the connection line position changed when I reopened the Diagram after saving. Figure 1 is before saving, and Figure 2 is opened after saving. I set the SourceConnectorPosition and TargetConnectorPosition properties as follows:
<Style TargetType="{x:Type telerik:RadDiagramConnection}" x:Key="CommonDiagramConnectionStyleBase" BasedOn="{StaticResource RadDiagramConnectionStyle}">
        <Setter Property="SourceCapType" Value="{Binding SourceCapType, Mode=OneWayToSource}" />
        <Setter Property="TargetCapType" Value="{Binding TargetCapType, Mode=OneWayToSource}" />
        <Setter Property="Visibility" Value="{Binding Visibility, Mode=OneWayToSource}" />
        <Setter Property="Position" Value="{Binding Position, Mode=OneWayToSource}" />
        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=OneWayToSource}" />
        <Setter Property="SourceConnectorPosition" Value="{Binding SourceConnectorPosition, Mode=TwoWay}" />
        <Setter Property="StartPoint" Value="{Binding StartPoint, Mode=TwoWay}" />
        <Setter Property="TargetConnectorPosition" Value="{Binding TargetConnectorPosition, Mode=TwoWay}" />
        <Setter Property="EndPoint" Value="{Binding EndPoint, Mode=TwoWay}" />
        <Setter Property="ZIndex" Value="{Binding ZIndex, Mode=OneWayToSource}" />
        <!--<Setter Property="Background" Value="{StaticResource DiagramShape_Connection_Background}" />
        <Setter Property="Stroke" Value="{StaticResource DiagramShape_Connection_BorderBrush}" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="ZIndex" Value="{StaticResource connectionZIndex}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <c:If Condition="WPF">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />

1 Answer, 1 is accepted

Sort by
Dinko | Tech Support Engineer
Telerik team
answered on 21 Nov 2019, 07:39 AM

Hello Yuanhong,

Thank you for the provided image.

As you mentioned that the RadDiagram is used in the MVVM scenario, the LinkViewModelBase class does not expose SourceConnectorPosition and TargetConnectorPosition properties. You will need to manully serialize this overriding the SerializeLink and DeserializeLink methods. The custom class needs to derive from the SerializableGraphSourceBase class. You can take a look at the Serialize a Databound Diagram help article which could be in handy for your case.

Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question