CODEWITHSUNDEEP
wpfpathgeometry
Sami
Sami

Reputation: 99

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>

Upvotes: 1

Views: 1854

Answers (2)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37059

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>

Upvotes: 1

GCamel
GCamel

Reputation: 622

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>

Upvotes: 0

Related Questions