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

6 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.

Rispondi

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

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. 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 )

Google+ photo

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

Connessione a %s...