Dotted lines for edges

May 21, 2013 at 11:23 AM

Is it possible to have dotted lines for edges. If so, please help me how to proceed with this.

Thanks in Advance
May 22, 2013 at 6:32 AM
You can add StrokeDashArray="1 2" param to the Path object in the EdgeControl template. Just play with the values and look help on this param.

Also you can look at my project at . It is being actively developed and you may found it interesting. Cheers!
May 22, 2013 at 6:41 AM
Thanks Panthernet. I tried that yesterday and got it working. But my requirement is to have dotted lines and solid lines for edges based on a value of the property of custom data type (e.g. assume property1 is part of pocEdge. if property1 = "value1" then edge should have solid lines and property1="value2" then edge should have dotted lines).
Not sure how to achieve this.

Thanks in advance
May 22, 2013 at 12:12 PM
Edited May 22, 2013 at 12:14 PM
I haven't tested it but it should be something like this:
  1. Create converter to return DoubleCollection data based on edge data:
public class EdgeDashConverter : IValueConverter
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
        var edgedata = value as YOUR EDGE DATA TYPE HERE;
        if(edgedata.prop == 0) return new System.Windows.Media.DoubleCollection(new double[] { 1, 2 }); // PLAY with values 
        else return new System.Windows.Media.DoubleCollection(new double[] { 3, 4 });
    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
        return null;
In the template file define new object for converter instance:
<local:EdgeDashConverter x:Key="dconv" />
Add converter to needed property in EdgeControl template:
StrokeDashArray="{Binding Path=Edge, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource dconv}}"
May 23, 2013 at 7:38 AM
Super!! Its working!! Thanks a lot panthernet!!!
May 23, 2013 at 11:15 AM
But Pahternet, there is a small issue with this. When the line is dotted, the arrow is also dotted in the edge and it looks weird. So can u please help me on achieving a dotted line with solid arrow in the edge? somethign like ---->
May 23, 2013 at 12:37 PM
Edited May 23, 2013 at 12:38 PM
You can try to add arrow LineSegment s in EdgeRoutetoPointConverter this way:
                        new LineSegment(p2 + v - n, true) { IsStroked = false },
                        new LineSegment(p2 + v + n, true) { IsStroked = false }}, true)
IsStroked property set to false should not stroke an arrow. Though i've alsoi havn't tested it :)
As a huge workaround you can try to split Path objects into two - for arrow and line respectedly.
May 24, 2013 at 7:04 AM
Panternet, I had tried that IsStroked yesterday, It isn't working :-( . As you said having two Paths would be a huge workaround. :(.
Thanks anyways!!
May 24, 2013 at 8:56 PM
Well, then i think the second Path is the only way. It is simple, but i can't provide detailed example as my own library is already have many differences in edge rendering from Graph#. Though all you need is define the second Path object in the EdgeControl template, define another converter for that Path. If you have simple edges you can even have single converter with simple calculations done. Now you set the dashed path in the first converter and normal arrowhead path in the second converter.
Or you can add additional DependencyProperty to EdgeControl class and store arrowhead coordinates (or even Path object already built) calculated in first converter and then bind this new property to the second path object.
May 27, 2013 at 10:28 AM
Let me try and see. Will update you.
Anyways thanks a lot.