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! 😀

Xamarin.Forms updated to 1.3.3 :)

This evening Xamarin Forms, the best tool offered by Xamarin to build native UIs for iOS, Android and Windows Phone from a single, shared C# codebase, picked up an update which bumps its version number up to the 1.3.3 version. You can find a detailed changelog at this link:

or just below here 🙂

Release Notes

## Enhancements ##

– Deeply nested Grid performance enhanced

## Bug Fixes ##

– [Bug 21606]( – Page Title not updating when set in OnAppearing() Method the second time page is displayed. (iOS)
– [Bug 20798]( – ListView TextCell.DetailProperty only wraps on Android
– [Bug 24777]( – jobject must not be IntPtr.Zero exception when replacing Content of a Page
– [Bug 26214]( – On Android, InputTransparent=true does not work with ScrollView
– [Bug 22673]( – Initially hidden BoxView when made visible does not render (but does take up space in the UI)
– [Bug 25703]( – Webview waits to load the content until webviews on previous pages are loaded
– [Bug 26139]( – Navigation.RemovePage() still shows the back button on Android
– [Bug 26304]( – System.ArgumentNullException thrown when moving items in an ObservableCollection that is observed by a ListView
– [Bug 26064]( – ListView, ImageCell and disabled source cache and same image url leads to degraded performance
– [Bug 26121]( – Android ListView.ScrollTo doesn’t work when ListView inside TabbedPage
– [Bug 26501]( – Context Actions cause views to be hidden on iOS after re-use
– [Bug 23585]( – [Android] ListView not updated when ObservableCollection is modified

## Other Fixes ##

– [Core] CarouselPage now has more informative error when used without Children
– [Android] BoldItalic text now works as expected
– [Android] HeaderCells no longer tapable in TableView
– [Android] Fix NullReferenceException when re-using ListView on second page
– [iOS] SearchBar cancel button hides if there is nothing to clear
– [iOS] EntryCell Completed event fires twice
– [iOS] Fix potential crash with Editor inside of a ScrollView
– [iOS] Fix potential crash when ScrollView is inside of ViewCell
– [iOS] Fix issue where ContextActions could end up out of order
– [WP] Keyboard action for search does not match other platforms
– [Xaml] Text as content property now properly trims whitespace
– [Xaml] Duplicate x:Name’s throw a more informative error now
– [Xaml] Better error on Type mismatch for

Update it asap and tell us if anything improved in your everyday Forms coding! 🙂