How to draw a circle with x mark? - wpf

Question

I'm trying to draw a circle with perfect X mark.
I managed to draw a circle with half of the X mark. I'm not sure how to draw the second half.
Thank you
<Path Stroke="Black"
StrokeThickness="4" Fill="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0">
<PathFigure.Segments>
<LineSegment Point="100,100" />
<ArcSegment Size="50,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="Clockwise"
Point="0,0" />
<ArcSegment Size="50,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="Clockwise"
Point="100,100" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

Answer 1

You can "simplify" this, or at least make it take up less space in the XAML editor, by using Path Markup Syntax. The portion of Data before the blank line reproduces what you've already got: M for "move", L for "line to", A for "arc". The "Move" and "Line To" commands after the blank line add the second line.
<Path
Stroke="Black"
StrokeThickness="4"
Fill="Red"
Data="
M 0,0
L 100,100
A 50,50 45 1 1 0,0
A 50,50 45 1 1 100,100
M 100,0
L 0,100"
/>
You don't need to format it with newlines like that; I just inserted the newlines to clarify how it maps onto your version. Fortunately, you added the attributes to your ArcSegment elements in the same order as the corresponding arguments to A in the markup syntax.
This is how it's usually done, though it's arguably less readable:
Data="M 0,0 L 100,100 A 50,50 45 1 1 0,0 A 50,50 45 1 1 100,100 M 100,0 L 0,100"
Alternatively, to finish it the same way you started, just add the second line as another PathFigure:
<Path
Stroke="Black"
StrokeThickness="4"
Fill="Red"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0">
<PathFigure.Segments>
<LineSegment Point="100,100" />
<ArcSegment
Size="50,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="Clockwise"
Point="0,0"
/>
<ArcSegment
Size="50,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="Clockwise"
Point="100,100"
/>
</PathFigure.Segments>
</PathFigure>
<!-- Second line -->
<PathFigure StartPoint="100,0">
<PathFigure.Segments>
<LineSegment Point="0,100" />
</PathFigure.Segments>
</PathFigure>
<!-- /Second line -->
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

Answer 2

use this...https://materialdesignicons.com/
<Viewbox Width="48" Height="48">
<Canvas Width="24" Height="24">
<Path Data="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" Fill="Black" />
</Canvas>