Search code examples
wpfpathgeometry

How to draw a circle with x mark?


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>

Solution

  • 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>