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

How to display a dotted line in a custom shape

1 Answer 404 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Li asked on 27 Sep 2019, 09:28 AM

Hello, I am using RadDiagram to draw a lot of custom shapes, someone need to display dashed lines, I draw the dotted line in Expression Design 4 and export it , but it is not displayed in RadDiagram as dashed lines, Anyone can help me, thank you


<Style TargetType="{x:Type local:RightConnectLine}">
      <Setter Property="Width" Value="350" />
      <Setter Property="Height" Value="50" />
      <Setter Property="Margin" Value="0" />
      <Setter Property="Template">
              <ControlTemplate TargetType="{x:Type local:RightConnectLine}">
                          <DrawingBrush Stretch="Uniform">
                                          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0.5,0.5L 0.5,75.5">
                                                  <Pen LineJoin="Round" Brush="#FF000000"/>
                                          <GeometryDrawing Brush="#FF000000" Geometry="F1 M 1,5.83334L 1,8.5L 0,8.5L 0,5.83334L 1,5.83334 Z M 1,11.1667L 1,13.8333L 0,13.8333L 0,11.1667L 1,11.1667 Z M 1,16.5L 1,19.1667L 0,19.1667L 0,16.5L 1,16.5 Z M 1,21.8333L 1,24.5L 0,24.5L 0,21.8333L 1,21.8333 Z M 1,27.1667L 1,29.8333L 0,29.8333L 0,27.1667L 1,27.1667 Z M 1,32.5L 1,35.1667L 0,35.1667L 0,32.5L 1,32.5 Z M 1,37.8333L 1,40.5L 0,40.5L 0,37.8333L 1,37.8333 Z M 1,43.1667L 1,45.8333L 0,45.8333L 0,43.1667L 1,43.1667 Z M 1,48.5L 1,51.1667L 0,51.1667L 0,48.5L 1,48.5 Z M 1,53.8333L 1,56.5L 0,56.5L 0,53.8333L 1,53.8333 Z M 1,59.1667L 1,61.8333L 0,61.8333L 0,59.1667L 1,59.1667 Z M 1,64.5L 1,67.1667L 0,67.1667L 0,64.5L 1,64.5 Z M 1,69.8333L 1,72.5L 0,72.5L 0,69.8333L 1,69.8333 Z M 1,75.1667L 1,75.5L 0,75.5L 0,75.1667L 1,75.1667 Z M 1,0.5L 1,3.16666L 0,3.16666L 0,0.5L 1,0.5 Z "/>

1 Answer, 1 is accepted

Sort by
Dinko | Tech Support Engineer
Telerik team
answered on 02 Oct 2019, 07:18 AM

Hi Li Xin,

Thank you for the provided style.

My assumption here is that the RightConnectLine is a RadDiagramConnection. In this case, you can consider using the StrokeDashArray property of the connection to create a dashed line. Check the following code snippet, which demonstrates what I have in mind.

<telerik:RadDiagram x:Name="diagram">
    <telerik:RadDiagramShape x:Name="shape1" Position="200, 200" Content="Shape 1 "/>
    <telerik:RadDiagramShape x:Name="shape2" Position="660, 200" Content="Shape 2 "/>
    <telerik:RadDiagramConnection  StrokeThickness="1" BorderThickness="2" BorderBrush="Red" Stroke="Green" StrokeDashArray=" 5,3" Source="{Binding ElementName=shape1}" Target="{Binding ElementName=shape2}" />

Using the above set-up, I think I was able to achieve the same visualization as demonstrate in the attached pictures. Give this a try and let me know how it goes.

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