xamrin.ios draw circular progressbar from top edge instead of right edge - xamarin.ios

Question

I am working on xamarin.forms app. for that i need circular progressbar. I almost got it working in xamarin.ios using CustomRenderer but its not actually what i wanted.
My circular progressbar in xamarin.ios renderer works but starts from the right edge of the containg rectangle. but I want it to start from the top edge in clockwise direction.
I tried to change start angle to -90 or 270 but still it starts from the right side and sometimes it doesn't work also. I am not sure in which condition its not working but I think when I use Math.PI constant in code, Draw never calls. I have referred this link.
class NativeProgressBarRenderer : ViewRenderer
{
private bool _sizeChanged = false;
//private CG _paint;
private CGRect _ringDrawArea;
private nfloat _radius;
const float FULL_CIRCLE = 2 * (float)Math.PI;
// int _radius = 10;
float _lineWidth = 10;
nfloat _percentComplete = 0.0f;
UIColor _backColor = UIColor.LightGray; //UIColor.FromRGB(46, 60, 76);
UIColor _frontColor = UIColor.Green; //UIColor.FromRGB(234, 105, 92);
protected override void OnElementPropertyChanged(object sender,
System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ProgressBar.ProgressProperty.PropertyName ||
e.PropertyName == PlayerProgressBar.RingThicknessProperty.PropertyName ||
e.PropertyName == PlayerProgressBar.RingBaseColorProperty.PropertyName ||
e.PropertyName == PlayerProgressBar.RingProgressColorProperty.PropertyName)
{
SetNeedsLayout();
SetNeedsDisplay();
}
if (e.PropertyName == VisualElement.WidthProperty.PropertyName ||
e.PropertyName == VisualElement.HeightProperty.PropertyName)
{
_sizeChanged = true;
SetNeedsLayout();
SetNeedsDisplay();
}
}
public override void Draw(CoreGraphics.CGRect rect)
{
base.Draw(rect);
using (CGContext g = UIGraphics.GetCurrentContext())
{
var progressRing = (PlayerProgressBar)Element;
// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
// Screen density
var density = mainDisplayInfo.Density;
_lineWidth = (float)Math.Ceiling(progressRing.RingThickness * density);
var diameter = Math.Min(this.Bounds.Width, this.Bounds.Height);
_radius = (int)(diameter / 2) - _lineWidth;
_backColor = progressRing.RingBaseColor.ToUIColor();
_frontColor = progressRing.RingProgressColor.ToUIColor();
_percentComplete = (float)progressRing.Progress;
var x = Bounds.GetMidX();
var y = Bounds.GetMidY();
//DrawGraph(g, Bounds.Left, Bounds.Top); // Tried to change x,y
DrawGraph(g, Bounds.GetMidX(), this.Bounds.GetMidY());
};
}
public void DrawGraph(CGContext g, nfloat x, nfloat y)
{
//g.ScaleCTM(1, -1);
//g.TranslateCTM(0, -Bounds.Height);
//g.RotateCTM(270);
g.SetLineWidth(_lineWidth);
// Draw background circle
CGPath path = new CGPath();
_backColor.SetStroke();
path.AddArc(x, y, _radius, 270, _percentComplete * FULL_CIRCLE, true);
g.AddPath(path);
g.DrawPath(CGPathDrawingMode.Stroke);
// Draw overlay circle
var pathStatus = new CGPath();
_frontColor.SetStroke();
//CGAffineTransform cGAffineTransform = new CGAffineTransform();
//cGAffineTransform.Rotate(-90); // This also doesn't work
// Same Arc params except direction so colors don't overlap
pathStatus.AddArc(x, y, _radius, 0, _percentComplete * FULL_CIRCLE, false);
g.AddPath(pathStatus);
g.DrawPath(CGPathDrawingMode.Stroke);
//cGAffineTransform.Invert();
}
I expect to run it from top of the circle. Kindly help!
Thank you

Answer 1

This is because the start angle is not beginning at 0 o'clock. Here is its default coordinate system:
So each angle should minus 0.5π. Modify your code like:
// Draw overlay circle
var pathStatus = new CGPath();
_frontColor.SetStroke();
pathStatus.AddArc(x, y, _radius, -0.25f * FULL_CIRCLE, (_percentComplete-0.25f) * FULL_CIRCLE, false);
g.AddPath(pathStatus);
g.DrawPath(CGPathDrawingMode.Stroke);