Forms frame isn't the same on iOS

Question

I was using Xamarin Forms to create Android version with frames without any custom renderer of frame, it's fine. But when I use it on iOS, all frames are shadowed and separated to each other, it's weird. Should I make a custom renderer for iOS or it should be the same without any modification?

Answer 1

Yes, the default parameter of Frame is different between android and iOS.

iOS: OutlineColor = Black , Android : OutlineColor = Transparent

iOS: HasShadow = true , Android : HasShadow = false

If you want them to be identical, you should make a class derive from Frame and specify the different property to be the same, and you use this class instead.

public class NeatFrame : Frame
{
    public NeatFrame ()
    {
        this.OutlineColor = Color.Transparent;
        this.HasShadow = false;

        this.HorizontalOptions = LayoutOptions.Fill;
        this.VerticalOptions = LayoutOptions.Fill;
        this.BackgroundColor = Color.Transparent;       
    }
}

Answer 2

For Android, the property HasShadow (True) is working as expected in the Frame but for iOS I added the following Renderer in the iOS project:

[assembly: ExportRenderer(typeof(Frame), typeof(MaterialFrameRenderer))]
namespace YOU_IOS_NAMESPACE
{
    public class MaterialFrameRenderer : FrameRenderer
    {
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);

            Layer.ShadowRadius = 2.0f;
            Layer.ShadowColor = UIColor.Gray.CGColor;
            Layer.ShadowOffset = new CGSize(2, 2);
            Layer.ShadowOpacity = 0.80f;
            Layer.ShadowPath = UIBezierPath.FromRect(Layer.Bounds).CGPath;
            Layer.MasksToBounds = false;
        }
    }
}

Please also add some margin (Margin="0,5,0,5") in the Frame otherwise you won't be able to see the shadow if another view is too close.

For more detail:

https://alexdunn.org/2017/05/01/xamarin-tips-making-your-ios-frame-shadows-more-material/