Drawing WPF Polygon with a stroke in solid color or transparent around

Question

I need to create a generic triangle in WPF indicating coordinates, stroke and colors for stroke and filling area. The problem is that i want indicate as color also the Transparent for stroke, meaning than using the same coordinate, I want to draw, all inside this shape, a transparent stroke that replace for his thickness the fill color, but it seems not be possible (I found and solved with a triky the same problem for Circle and Rectangle shapes, but with Polygon it doesn't work: Drawing a WPF shape, as a Rectangle: StrokeThickness halve if Stroke is Transparent ). The code I use now include a clip because the stroke grow part inside and part outside the coordinate profile, I need to remove outside part, and some converter to give array of points in the correct way:

<UserControl.Clip>
    <PathGeometry>
        <PathFigure StartPoint="{Binding Triangle.Points, Converter={StaticResource PointLocationClipConverter}}" IsClosed="True">
            <PolyLineSegment Points="{Binding Triangle.Points, Converter={StaticResource PointCollectionClipConverter}}" />
        </PathFigure>
    </PathGeometry>
</UserControl.Clip>

<Grid x:Name="_grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Polygon Points="{Binding Triangle.Points, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource PointCollectionConverter}}" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0"
             Width="{Binding ActualWidth, ElementName=_grid}"
             Height="{Binding ActualHeight, ElementName=_grid}"
             Stroke="{Binding Triangle.BorderColorBrush}"
             StrokeThickness="{Binding Triangle.Thick, Converter={StaticResource PoligonThickConverter}}" 
             Fill="{Binding Triangle.BackgroundBrush}" />

</Grid>

What I have at this moment is:

what I want instead is:

notice: for both example posted, the first image has solid color for Stroke and Fill area, second image has Transparent on Stroke and solid color for Fill area (and here is the problem), third image has solid color for Stroke and Transparent for Fill area. All images have same coordinates and StrokeThickness value.

Thanks for help!

You'll need to draw two filled, non-stroked, non-overlapping Path elements with appropriate geometries. Take a look at Geometry.GetWidenedPathGeometry for the stroke part and Geometry.Combine for the interior. — Clemens
thanks, good start point! I indicate in my answer the found solution — Roberto

Roberto Roberto · Accepted Answer · 2019-04-19T15:00:23

Starting from @Clemens indication, I elaborate a solution with a series of transformation, without any geometric calculus. Less or more the solution is here, I will try to apply to my context, but in the end is:

    <Path MouseLeftButtonUp="PathPolyline_MouseLeftButtonUp"
          StrokeThickness="0" Stroke="Transparent" Fill="Gold" ClipToBounds="False">
        <Path.Data>
            <PathGeometry FillRule="EvenOdd" >
                <PathFigure StartPoint="0,0" IsClosed="True">
                    <PolyLineSegment Points="50,50 0,80"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

and elaboration in C# code will do something as:

private void PathPolyline_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  Brush brush = Brushes.Black;
  Pen pen = new Pen(brush, 20.0); //thickness double than wanted measure: 20 to reduce 10
  //
  Path path = sender as Path;
  PathGeometry pg = path.Data as PathGeometry;
  PathGeometry pg2 = pg.GetWidenedPathGeometry(pen);
  //
  Transform tr = Transform.Identity;
  PathGeometry pg324 = Geometry.Combine(pg, pg2, GeometryCombineMode.Intersect, tr);
  pg.AddGeometry(pg324);
}

Drawing WPF Polygon with a stroke in solid color or transparent around

1 Answers