How to display a dotted line in a custom shape

[Li]

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">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type local:RightConnectLine}">
                  <Grid>
                      <Grid.Background>
                          <DrawingBrush Stretch="Uniform">
                              <DrawingBrush.Drawing>
                                  <DrawingGroup>
                                      <DrawingGroup.Children>
                                          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0.5,0.5L 0.5,75.5">
                                              <GeometryDrawing.Pen>
                                                  <Pen LineJoin="Round" Brush="#FF000000"/>
                                              </GeometryDrawing.Pen>
                                          </GeometryDrawing>
                                          <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 "/>
                                      </DrawingGroup.Children>
                                  </DrawingGroup>
                              </DrawingBrush.Drawing>
                          </DrawingBrush>
                      </Grid.Background>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

[Dinko | Tech Support Engineer]

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}" />
</telerik:RadDiagram>

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.

Regards,
Dinko
Progress Telerik