MapPolyline stroke overlaps filled polyline

[Peter]

We're using MapPolygon on the map, and we allow the user configure the map points, the stroke, the stroke thickness, the fill color and the fill opacity. Want to be able to control the stroke opacity separately from the file opacity. We've found that if the stroke thickness is greater than 1, then the stroke line overlaps the filled area. This results in the effect shown in the attached image mappolygon.png i.e. we see the fill color, the line color and a mix of the two colors where they overlap.

What we'd like to have is a filled polygon where the stroke does not overlap the filled area. Can you suggest a way to achieve this effect?

 

[Peter]

Further to my last post it looks like if I set the stroke opacity to 1 (255 in the stroke color alpha channel) the polygon fill opacity overrides this and affects the stroke opacity too. The attached image shows what we are hoping to be able to achieve i.e. independently controllable opacity for stroke and fill

[Vladimir Stoyanov]

Hello Peter,

Thank you for the provided pictures. 

I investigated the described scenario and it turns out that this is the expected WPF behavior when the Stroke brush has an opacity. For example, you can reproduce the same effect with the following code:

<Path Data="M 300 100 L 500 400 100 400 Z"
          StrokeThickness="10"
          Stroke="#33ff0000"
          Fill="Blue" />

With the above information in mind, I am afraid that I cannot suggest a way to have opacity for the stroke color without the overlapping effect. You can consider setting the stroke opacity to 1, as you suggested in your last reply. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Peter]

Hi Vladimir,

Thanks for your response. I've achieved the behaviour I require by adding two PolylineData objects in my view model to a visualization layer. The first is for the fill, the second is for the line e.g.

public PolylineData PolyLine => _polyline ?? (_polyline = new PolylineData
{
    Points = MapPoints,
    ShapeFill = new MapShapeFill
    {
        Fill = Brushes.Transparent,
        Stroke = new SolidColorBrush(ToMediaColor(MapLineColor, _lineOpacity)),
        StrokeThickness = LineWidth,
    }
});

public PolylineData PolyLineFill => _polylineFill ?? (_polylineFill = new PolylineData
{
    Points = MapPoints,
    ShapeFill = new MapShapeFill
    {
        Fill = new SolidColorBrush(ToMediaColor(MapFillColor, _fillOpacity)),
        Stroke = Brushes.Transparent,
        StrokeThickness = 1,
    }
});

Thanks

Pete

 

[Vladimir Stoyanov]

Hello Pete,

I am glad to hear that you were able to achieve what you are going for. 

Thank you for sharing your approach with the community.

Regards,
Vladimir Stoyanov
Progress Telerik