Diagram selecting wrong connector or not at all (intermittent)

[Chris]

Hi,

I have an issue of when I click on a connector with text block content, the diagram control either selects the incorrect connector or does not select anything at all.  It appears a bit random but is quite repeatable.

I have attached a video of the first scenario: https://www.dropbox.com/s/i7wwxon7iqy6hr1/Telerik%20Diagram%20selection%20issue.mp4?dl=0

(Download video as the video may lose video quality)

In this video the middle connector is already selected.  I then click the connector on the far left and you will see the connector on the far right is selected instead.

Here is the sample code:

<Window x:Class="TelerikWpfApp1.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="800" Width="800">
    <Grid>
        <telerik:RadDiagram>
            <telerik:RadDiagramConnection
                StartPoint="100,100"
                EndPoint="100, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"  
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"     
                               Background="Yellow"
                           FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"                          
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
            <telerik:RadDiagramConnection
                StartPoint="140,100"
                EndPoint="140, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"  
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"                          
                           Background="Yellow"
                               FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"                          
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
            <telerik:RadDiagramConnection
                StartPoint="180,100"
                EndPoint="180, 500"
                ConnectionType="Polyline"
                SourceConnectorPosition="Auto"
                StrokeThickness="2"  
                ToolTipService.IsEnabled="True"
                SourceCapType="Arrow1"
                TargetCapType="Arrow2"
                ZIndex="4">
                <telerik:RadDiagramConnection.Content>
                    <TextBlock Text="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"                          
                           Background="Yellow"
                               FontFamily="Arial"
                           FontSize="10"
                           Visibility="Visible"
                           FontWeight="Normal"                          
                           RenderTransformOrigin="0.5, 0.5"
                           Padding="0, 15, 0, 0">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="90"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </telerik:RadDiagramConnection.Content>
            </telerik:RadDiagramConnection>
        </telerik:RadDiagram>
    </Grid>
</Window>

 

Is there a workaround for this?

 

 

[Chris]

Forgot to mention I am using Telerik WPF version 2016.2.613.45

[Chris]

Forgot to mention, I am using Telerik (WPF) 2016.2.613.45

[Kiril Vandov]

Hello Chris,

This is not an issue connected to the RadDiagram, let me explain why is that behavior happening. In the provided sample code you are applying RenderTransform to the Content of the RadDiagramConnections, when you apply RenderTransform, which is a transform that modifies the appearance of the element but is applied after the layout pass is complete. By using the RenderTransform property instead of the LayoutTransform property, you can obtain performance benefits. That is why the TextBlock is only visually dawned to a different slot but you can still interact with it on its original measured position.
That is why you should use LayoutTransform in such situations instead of RenderTransform. You can find more detailed information on how to use the two transformation in this help article.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik by Progress

[Chris]

Thankyou so much! Looks like I need a WPF refresher.

[Chris]

Thankyou so much! Looks like I need a WPF refresher.