Circled Label Xamarin Forms

Question

What I want to Achieve:

A seen in the below screenshot there is a label with a hole number, I want to create a circle around this label,how would I go about achieving this?

Now my assumption is that to achieve this I will need to create a custom renderer and override the Label class but from there I'm not sure how I would draw the circle and achieve the expected results.

Any guidance and assistance would be greatly appreciated.

Answer 1

On the following link you will find the code and video for a RoundedBoxView (half way down the page).

http://forums.xamarin.com/discussion/17792/video-on-making-custom-renderers

If you create this within your project you can then do the following to create your rounded box label:-

*) Grid as the outer control.

*) Create a RoundedBoxView as a child of the Grid to create your circle - You could either specify fixed width/height on the grid outer control to know what value to specify the RoundedBoxView's CornerRadius property, or alternatively hook into the SizeChanged event handler to set the values.

*) Create a Label control also as a child of the Grid control, and center the position of it.

You can then create your Hole text in a Label within a horizontal StackLayout and then add the above in to create the effect you desire.