All Posts
In your application you might need to create a Circle image with a text inside it or just a simple circle that needs different colors for status for example. In this case we can use a Frame and add CornerRadius property like this:
<Frame WidthRequest="30" HeightRequest="30" CornerRadius="15" HasShadow="false"
BackgroundColor="Red" Padding="0"/>
As you can see, there are more properties added like HasShadow or Padding, but let’s explain all of them:
WidthRequest and HeightRequest
These 2 properties are mandatory and MUST have the same size in order to be able to draw a circle.
CornerRadius
CornerRadius will make our frame rounded, but in order to be a perfect circle it has to be half of the width and request, in our example half of 30 which is 15.
HasShadow
This property has be set to false because Frame has a big shadow by default, which must certainly you won’t need it.
Padding
Well, this was my nightmare. When I first tried to implement this idea of rounded Frame, I thought that only the CornerRadius will suffice, but that was not the case. My circle looked like a rounded rectangle like in the image below:
And the problem was, obviously, the Padding! A Frame has a default padding of 20, so it had to be removed by setting it to 0. And then the circle came out 😀
So this is it. Very simple, no renderers, not anything special. Also if you want to add a text inside the circle you can add a Label inside Frame like this:
<Frame WidthRequest="30" HeightRequest="30" CornerRadius="15" HasShadow="false"
BackgroundColor="Red" Padding="0">
<Label Text="45" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
Now, if you want to create a custom view, called CircleView, or whatever you like, I will post an example of how to do this too. It is very useful if need to add circles in different pages of your app. Stay tuned. 😉
