Search code examples
c#visual-studioxamarin.formsmobile-application

how can I give an image an octagonal shape?


I'm creating a mobile App. In this app there is the user's profile and i would like give an an octagonal shape to the user's profile. For the moment I have just an image:

<Image x:Name="ProfilePicture" HeightRequest="100" HorizontalOptions="Center" Source="Profile.png" TranslationY="50" VerticalOptions="End"/>

how can I shape this image?

The result I would like to achieve is this: enter image description here

a yellow outline and instead of the gift the user image


Solution

  • Xaml doesn't support drawing shapes directly. You have several options:

    1. Simple. Use shape image as resource. Put it all together with with grid or absolute layout.
    2. Smart. Use Font Awesome icons in your XF. You can reuse other icons to reduce bitmaps in your app. Unfortunately octagonal shape is available only in PRO edition.
    3. Heavy artillery. You can use Skiasharp or similar library to draw octagonal image with user image inside.

    Hope it helps.