How to draw paths in Xamarin.Forms XAML

Question

Coming from Windows Phone Silverlight, WPF and UWP world I'm now looking into Xamarin.Forms to port an app to iOS and Android. All of the icons and logos of that app up until now are Path elements in the App.xaml file. For example:

<DataTemplate x:Key="ImageAdd">
    <Path Width="30" 
     Height="30" 
     Stretch="Fill" 
     Fill="{StaticResource TsColorWhite}" 
     Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
</DataTemplate>

With this the app does not need scaled graphics for different screen resolutions.

Path is in System.Windows.Shapes namespace and therefore not available in XF.

So the question is: How can I load and show such paths in Xamarin.Forms?

Answer 1

Starting from Xamarin.Forms 4.7.0 Shapes were introduced, you can draw your paths directly in your xaml. Aspect property is the equivalent of Stretch property in Xamarin.Forms. Shapes (including Paths) are in Xamarin.Forms.Shapes namespace.

<DataTemplate x:Key="ImageAdd">
    <Path Width="30"
          Height="30"
          Aspect="Fill"
          Fill="{StaticResource TsColorWhite}"
          Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "/>
</DataTemplate>

Related documentation

• Microsoft Blog: Drawing UI with Xamarin.Forms Shapes and Paths .

• Microsoft Official documentation: Xamarin.Forms Shapes .

• GitHub: Specifications: Shapes & Paths