Xamarin Forms custom frame shape around Image

Question

I have an image in my app with a frame around it to make the image a circle. I want a custom shape for the Frame, but can't figure out how to get this exact shape.

(Please ignore the house inside the drawing, it is simply there to represent an Image in Xamarin, I only need the outline to be the shape).

I also don't require the Frame to have a colored border, only the shape.

Any help will be appreciated!

Here is my code right now for the Frame + Image:

<Frame x:Name="PictureFrame" Padding="0" Margin="0" HorizontalOptions="Center" BorderColor="Transparent" WidthRequest="80" HeightRequest="80" HasShadow="False">
    <Image x:Name="Picture" Source="picture" Margin="0,0,0,0" Aspect="AspectFill"/>
</Frame>

Answer 1

You probably have to create a custom renderer to achieve what you're looking for. For example, on Android the Frame mask is actually implemented with a bezier path that you could control to your liking if you dive a bit deeper into the code.

Take a look at the FreshEssentials AdvancedFrame view which almost has what you need. The modification they've made is that you can have a sharp 90 degree angle on either both corners on the left or on the right. You'd simply have to modify this code a little bit to have a rounded corner on all except the top left corner.

What you need to modify are the following:

• AdvancedFrame (In case you want the corner radiuses to be configurable separately or something else. This is the base that inherits from the original Frame control in Xamarin.Forms)
• AdvancedFrameRendererDroid
• AdvancedFrameRendereriOS
• AdvancedFrameRendererUWP (Only if you require UWP support)

Tips:

On Android, the background mask for the frame is defined with the Path class.

On iOS, UIBezierPath class from the UIKit framework is used.

Answer 2

Now with Xamarin.Forms you can use Shapes. The Path Data is your circle with point.

<AbsoluteLayout
    BackgroundColor="AliceBlue"
    >
    <Path
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Margin="8"
        Data="M142.798828,0 C221.365114,0.164668482 285,63.9009723 285,142.5 C285,221.200577 221.200577,285 142.5,285 C63.7994232,285 0,221.200577 0,142.5 C0,139.784357 0.0759637392,137.086456 0.225882227,134.408306 L0,133.828125 L0,0 L142.798828,0 Z"
        Stroke="LightBlue"
        StrokeThickness="2"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        />
    <Image
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        AbsoluteLayout.LayoutFlags="All"
        Aspect="AspectFit"
        Source="brigadeiro"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="94"
        HeightRequest="94"
        />
</AbsoluteLayout>