How to draw an arc in Xamarin.Forms (without Skia)?

Question

Hey guyz. I am trying to build an arc like this one for a circular progress bar but i can't get how the ArcSegment works. Here is what i want to achieve -

Here is my code so far -

   <Grid HorizontalOptions="Center" VerticalOptions="Center" RowDefinitions="300" ColumnDefinitions="300">  
     
               <Ellipse Aspect="Uniform"  
                    Stroke="#F7F7F7"  
                        StrokeThickness="12"/>  
               <Label VerticalOptions="Center" TextColor="#333333" HorizontalOptions="Center" FontSize="24" Text="02:54" />  
               <Path Aspect="Uniform"  StrokeLineCap="Round" StrokeThickness="12" Stroke="#FF9800">  
                   <Path.Data>  
                       <PathGeometry>  
                           <PathGeometry.Figures>  
                               <PathFigureCollection>  
                                   <PathFigure>  
                                       <PathFigure.Segments>  
                                           <PathSegmentCollection>  
                                               <ArcSegment Size="300,300"  
                                               IsLargeArc="True"  
                                               SweepDirection="Clockwise" Point="300,300"/>  
                                           </PathSegmentCollection>  
                                       </PathFigure.Segments>  
                                   </PathFigure>  
                               </PathFigureCollection>  
                           </PathGeometry.Figures>  
                       </PathGeometry>  
                   </Path.Data>  
               </Path>  
     
           </Grid>  

And this is what it gives me

Can someone please help and explain how to draw arc correctly. Furthermore i am going to animate the arc somehow....

Answer 1

Hello,

Welcome to Microsoft Q&A!

The ArcSegment object represents an elliptical arc between two points. The ArcSegment class has the five properties Point, Size, SweepDirection, IsLargeArc and RotationAngle.

• The Point property represents the endpoints of an arc.
• The Size property represents the x and y radiuses of an arc.
• The SweepDirection property specifies whether an arc sweep direction is clock wise or counter clock wise.
• The IsLargeArc property returns true if an arc is greater than 180 degrees.
• The RotationAngle property represents the angle by which an ellipse is rotated about the x-axis.

In your sample try to set StartPoint on PathFigure to draw an arc .

Refer to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/geometries#create-an-arcsegment .

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.