Coners of Custom Frame are getting trimmed in Xamarin forms iOS

Question

I have created a custom renderer for a frame to have rounded corners only on 2 sides. The code works fine in Android but in iOS the rounded corners are getting trimmed if the background color of frame is white and border color is blue like below image.

Custom Renderer IOS

public class CustomFrameRenderer : FrameRenderer
    {
        
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();

            UpdateCornerRadius();
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == nameof(CustomFrame.CornerRadius) ||
                e.PropertyName == nameof(CustomFrame))
            {
                UpdateCornerRadius();
            }
        }

        // A very basic way of retrieving same one value for all of the corners
        private double RetrieveCommonCornerRadius(CornerRadius cornerRadius)
        {
            var commonCornerRadius = cornerRadius.TopLeft;
            if (commonCornerRadius <= 0)
            {
                commonCornerRadius = cornerRadius.TopRight;
                if (commonCornerRadius <= 0)
                {
                    commonCornerRadius = cornerRadius.BottomLeft;
                    if (commonCornerRadius <= 0)
                    {
                        commonCornerRadius = cornerRadius.BottomRight;
                    }
                }
            }

            return commonCornerRadius;
        }

        private UIRectCorner RetrieveRoundedCorners(CornerRadius cornerRadius)
        {
            var roundedCorners = default(UIRectCorner);

            if (cornerRadius.TopLeft > 0)
            {
                roundedCorners |= UIRectCorner.TopLeft;
            }

            if (cornerRadius.TopRight > 0)
            {
                roundedCorners |= UIRectCorner.TopRight;
            }

            if (cornerRadius.BottomLeft > 0)
            {
                roundedCorners |= UIRectCorner.BottomLeft;
            }

            if (cornerRadius.BottomRight > 0)
            {
                roundedCorners |= UIRectCorner.BottomRight;
            }

            return roundedCorners;
        }

        private void UpdateCornerRadius()
        {
            var cornerRadius = (Element as CustomFrame)?.CornerRadius;
            if (!cornerRadius.HasValue)
            {
                return;
            }

            var roundedCornerRadius = RetrieveCommonCornerRadius(cornerRadius.Value);
            if (roundedCornerRadius <= 0)
            {
                return;
            }

            var roundedCorners = RetrieveRoundedCorners(cornerRadius.Value);

            var path = UIBezierPath.FromRoundedRect(Bounds, roundedCorners, new CGSize(roundedCornerRadius, roundedCornerRadius));
            var mask = new CAShapeLayer { Path = path.CGPath };
            NativeView.Layer.Mask = mask;
            //NativeView.Layer.CornerRadius = 0;
            NativeView.ClipsToBounds = true;
            NativeView.Layer.MaskedCorners = (CoreAnimation.CACornerMask)3;

        }
    }

Can someone please help me to resolve below issue. Thanks.

No, I tried the below mentioned solution, it's not considering corner radius with this — Mars
As it works fine on my side , could you share your sample so that I can test it on my side directly ? — Lucas Zhang

Lucas Zhang Lucas Zhang · Accepted Answer · 2021-01-07T11:25:05

You could check the following code

  private void UpdateCornerRadius()
    {
        var cornerRadius = (Element as Frame)?.CornerRadius;
        if (!cornerRadius.HasValue)
        {
            return;
        }

        var roundedCornerRadius = RetrieveCommonCornerRadius(cornerRadius.Value);
        if (roundedCornerRadius <= 0)
        {
            return;
        }

        var roundedCorners = RetrieveRoundedCorners(cornerRadius.Value);

        NativeView.Layer.MasksToBounds = true;
        var path = UIBezierPath.FromRoundedRect(Bounds, roundedCorners, new CGSize(roundedCornerRadius, roundedCornerRadius));
        var mask = new CAShapeLayer { Path = path.CGPath };
        mask.Frame = Bounds;
        mask.LineWidth = 1;
        mask.StrokeColor = UIColor.SystemBlueColor.CGColor;  // border color
        mask.FillColor = UIColor.Clear.CGColor;  // bg color , you need to set it as clear otherwise it will cover its child element
        mask.ShadowRadius = 0;
      
        NativeView.Layer.AddSublayer(mask);
      
       // NativeView.Layer.MaskedCorners = (CoreAnimation.CACornerMask)3;
        
    }

Coners of Custom Frame are getting trimmed in Xamarin forms iOS

2 Answers