Custom connections to MVVM

[Yuanhong]

Hi,

    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}" />
        </c:If>-->
    </Style>

[Dinko | Tech Support Engineer]

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.

Regards,
Dinko
Progress Telerik