Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

How to create a circular progress bar or only colour portion of a buttons border?

$
0
0

Hi,

I am wanting to do something that I have found next to no documentation for. I am wanting a way to track the users progress through my app and to display this I want to have the circular buttons that I use for different sections to show this. I am basically wanting a circular button whose Border colour fills up dependent on being given a value, somewhat like a button with a circular progress bar as the border.

I have had a look at creating a circular progress bar but I don't think this would be the best option as I would have to place the button inside it, and also I can only figure out how to create a circular progress bar in Android, not iOS and WP8. I know I am probably going to have to write custom renderers for this functionality, but don't really know where to start.

A few different ideas I have had was to override the button.bordercolor property in order to somehow only get the colour the border in black for a portion and white for the rest. This would require a value being passed in to determine how much of the border was to be coloured in black. Another option could be to layer the functional button on top of another disabled button and only fill a portion of the background one using the same logic as above, giving the notion of a border for the functional button. The final option I can think of would be to have maybe 10 assets, all with 10% of the circle filled in and load a different one depending on the value passed in. However, this is a last resort. It would increase the amount of time it takes for each page to render as I will have multiple buttons on each page and it won't be accurate.

Whichever option I take, I need to be able to override some part of the drawing property to only fill part of the button/ button border instead of the entire thing. Has anyone tried anything similar or have any ideas on how to achieve this.

Many Thanks.


Viewing all articles
Browse latest Browse all 58056

Trending Articles