How to draw shapes in Xamarin.Forms

In case you have ever found yourself in the situation of needing to draw a shape in Xamarin.Forms, this is the library you are going to love:

https://github.com/chrispellett/Xamarin-Forms-Shape

Basically, after importing this library (with nuget) into your project, all you have to do is drawing the form you want to display. You can choose among a variety of shapes, such as Circles, Rectangles and Circle Indicators. The Circle Indicator, in particular, is an interesting control capable of displaying a two stroke width circle where the ticker bit shows the progress out of 100%).

Each shape exposes the following properties:

  • Stroke Color
  • Color (fill)
  • Stroke Width
  • Corner Radius
  • Padding

For instance, if I wanted to draw a circle with a number inside, all I have to do would be using this code:

<Grid>
<ShapeView ShapeType=”CircleIndicator” StrokeColor=”#FF21A0DB” StrokeWidth=”3″
HorizontalOptions=”Center” VerticalOptions=”Center”
WidthRequest=”200″ HeightRequest=”200″/>
<Label x:Name=”BeatLabel” Text=”200″ FontSize=”48″ FontAttributes=”Bold” BackgroundColor=”Transparent” TextColor=”White” VerticalOptions=”Center” HorizontalOptions=”Center” />
</Grid>

And, upon launching your app, the result would be:

ShapeView Circle Screen

As you can see the Circle Shape was correctly rendered, with the number in it! 🙂

On the repo of the project, you can see a comparison between how the shapes are rendered in iOS and Android:

iOS Shapes

iOS Shapes

Android Shapes

Android Shapes

Thanks for reading and…

happy coding! 😀