Welcome to Xamarin Guy Show Blog

Keep updated for latest and Greatest Posts from Xamarin guy

Xamarin Forms Progress Ring with Counter

Some time it’s essential for the app to have progress ring that decrements as per progress value decrements. So I tried different ways to handle it but found no solution and came up with this solution finally which works.
First thing first if you want to follow detailed video tutorial please check this : https://youtu.be/DjfEBnPb4ns.

Progress Ring with Decrement Counter

Plugin used and added my Decrement counter functionality :
https://github.com/AndreasHennig/ProgressRingPlugin

In this project we will be adding ProgressRing from the plugin and there is no feature of adding text in middle out of the box on this plugin.
So we gonna add the text which decrements and can be placed in middle.

1. Note : xmlns:control=”clr-namespace:ProgressRingControl.Forms.Plugin;assembly=ProgressRing.Forms.Plugin”
Name space will be called as soon as the <control:ProgressRing> tags inherits it which will give us progress ring.

MainPage.Xaml Looks like this :

2. So we have created circular progress bar on Xaml side now we need to incorporate Progress ring with the timer counter which decrements from 60 or 30 sec to 0th second. Please watch video to better understand the functionality. https://youtu.be/DjfEBnPb4ns
MainPage.xaml.cs Will look like this.

3. At last we are going to create converter which is called on MainPage.xaml to decrement the progress value from 30 or 60 sec to 0th seconds :
ValueProgressBarConverter.cs

Output

Finally the full solution : http://xamaringuyshow.com/circular-progress-tut70/

 5,220 total views,  9 views today

Leave a Reply