How to make frame contents respect its corner radius? - xamarin

Question

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):-
Actual:-
How to make the frame contents respect the corner radius like what happens in Android ?

Answer 1

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

Answer 2

From shared code works in my local site :
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>