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:

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:

<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” />

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! πŸ˜€

7 pensieri su “How to draw shapes in Xamarin.Forms

    • Hi Stefano,
      thanks for reaching out! I think it was pulled from NuGet, probably due to incompatibility issues with the latest releases of Xamarin.Forms.

      As you can see from Github, latest update has been over 2 years ago.

      Try looking into XLabs, maybe there you will find something that suits your needs πŸ™‚

  1. Hi Guido,

    I look like you have used the Xaml file to draw the Circle instead of the cs file, i am trying to do the same, but i am getting error as it does not recognize the ShapeView.

    May you please help.


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di

Stai commentando usando il tuo account Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.