How to make frame contents respect its corner radius?

1
votes

I have different elements, controls and views wrapped in frames in order to apply corner radius, which is working fine on Android. But on the iOS side, even though the frame is round cornered, its contents does not clip to its radius but stays square as if nothing is applied.

Sample:-

<Frame BackgroundColor="{DynamicResource Theme}" CornerRadius="15" Padding="0">
    <Image Source="{Binding PImage}" HeightRequest="132.5" Aspect="AspectFill"/>
</Frame>

Expected (Which happens in Android):-

Expected Result

Actual:-

Actual Result

How to make the frame contents respect the corner radius like what happens in Android ?

2
xamarinxamarin.formsxamarin.ios
try set the HeightRequest and WidthRequest of the Frame instead of the image, also try to set the Padding of the frame to 1. If after that still doesn't work propertly wrap the Frame in a StackLayout. – FabriBertani
I tried them all, setting the height and width request, padding or wrapping the frame inside if a StackLayout. All didn't work... This is turning to be really weird... – Mohamed Ashraf
Does this answer your question? Frame corner radius not rounding corners on iOS – Arvis

2 Answers

1
votes

Clip the content of the frame to its boundaries:

<StackLayout Padding="30">
    <Frame CornerRadius="30" Padding="0" IsClippedToBounds="True">
        <Image Source="https://aka.ms/campus.jpg" />
    </Frame>
</StackLayout>

https://stackoverflow.com/a/55611485/1039935

enter image description here

0
votes

From shared code works in my local site :

enter image description here

The sample solution : Have a check with the version of Visual Studio and Xamarin Forms .Be sure that have updated to the latest version (Visual Studio: 16.6.5, Xamarin Forms : 4.7.0.1239).

Otherwise , you can create a Custom Frame Renderer in iOS to set CornerRadius .

Create a CustomFrame :

public class CustomFrame: Frame
{
}

Create a Custom renderer in iOS:

public class CustomFrameRenderer : FrameRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);

        Layer.CornerRadius = Element.CornerRadius;
        //Layer.CornerRadius = 15;
        Layer.MasksToBounds = true;

    }
}

In Xaml use the custom Renderer :

<local:CustomFrame BackgroundColor="CadetBlue"
        Padding="0">
    <Image Source="XamarinLogo.png"
            HeightRequest="132.5"
            Aspect="AspectFill" />
</local:CustomFrame>