C # user control (circle progress indicator) Xamarin Forms

Question

I want to know the best way to create a similar thing to this image using Xamarin Forms:

I have never created anything like this. I know how to use the progress bar, but not the “lap timeline"

Thank you for your help and any advice.

EDIT: if you have a / nuget plugin for this, this is cool, but I would like to know how to do it myself. I have never done anything like this.

Answer 1

This can be done using Custom Renderer.

Xamarin James Montemagno has a good guide on creating a custom progress bar.

https://blog.xamarin.com/using-custom-controls-in-xamarin-forms-on-android/

The official documentation for Xamarin.Forms Custom renderers can be found at https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/

Answer 2

I found that this post has the best solution so far for the Xamarin Forms cycle progress step. You basically use two semicircle images and rotate them based on progress, which in my opinion is a truly creative and elegant solution. No custom rendering required!

http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/