How can I get paths in a WPF GeometryGroup correct

Question

I am using a GeometryGroup to draw a symbol in the center of a circle.

The example below shows one of my attempts while experimenting with this. It features three straight lines that depart from the same point of origin (32,32):

<Grid>
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,19 Z"/>
                <PathGeometry Figures="M 32,32 L 19,32 Z"/>
                <PathGeometry Figures="M 32,32 L 19,19 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

When this is rendered however the three lines do not have the same endpoint, although they do seem to cross each other at this center point of 32,32.

If I combine these same three lines into one figure:

<Grid>
    <Path Stroke="Black" StrokeThickness="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,19 M 32,32 L 19,32 M 32,32 L 19,19 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

the rendered result looks different, but also odd: the third (diagonal) line is crossing the origin, the other two are ending in the origin and the x and y-coordinates of 19 do not match.

Why is this happening and how can I fix this?

Answer 1

The observed rendering behavior is apparently due primarily to the default value for the Shape.StrokeMiterLimit value, which is 10 and thus 10 times larger than the StrokeThickness used for the lines.

This causes rounding and jumps in the rendered endpoint locations for the lines.

Although I cannot explain why that would cause such different rendering results for my first example (3 separate geometry figure lines) vs. my second example (a single geometry figure that combines the same three lines).

Nevertheless, I solved my problem by using the following:

<Grid>
    <Path Stroke="Black" StrokeThickness="1" StrokeLineJoin="Round" StrokeMiterLimit="1" Width="64" Height="64" Fill="Yellow" VerticalAlignment="Top" HorizontalAlignment="Left" ClipToBounds="True">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="32,32" RadiusX="32" RadiusY="32"/>
                <PathGeometry Figures="M 32,32 L 32,16 M 32,32 L 16,32 M 32,32 L 16,16 Z"/>
            </GeometryGroup>
        </Path.Data>
    </Path>
</Grid>

With the below (correct) rendering result:

Similar problems with similar solutions were reported for converting svg to xaml and in a related question: weird issue when drawing a forth and back path in wpf