Xamarin iOS Round only some corners of a Button

Question

I need to achieve this effect on Xamarin.iOS for a Button (so just the blue button with rounded corners in the image), basically just make any corner of a button rounded, but not all of them at once. I prefer not using another nuget package like "Pancake" which I saw as an answer. Is there any platform specific customization on iOS to match the Android one?

I managed to achieve this on ANDROID like this:

public class DroidCustomButtonRenderer : ButtonRenderer
    {
        public DroidCustomButtonRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Forms.Button> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {                
                GradientDrawable gradientDrawable = new GradientDrawable();                         gradientDrawable.SetColor(global::Android.Graphics.Color.ParseColor(AppConstants.Constants.CUSTOM_BACK_BUTTON_COLOR_NEW));

                float[] radius = new float[8];

                radius[0] = 0;   //Top Left corner
                radius[1] = 0;   //Top Left corner
                radius[2] = 46f;     //Top Right corner
                radius[3] = 46f;     //Top Right corner
                radius[4] = 46f;     //Bottom Right corner
                radius[5] = 46f;     //Bottom Right corner
                radius[6] = 0;   //Bottom Left corner
                radius[7] = 0;   //Bottom Left corner

                gradientDrawable.SetCornerRadii(radius);
                Control.SetBackground(gradientDrawable);
            }
        }
    }

How can I achieve same on iOS please?

public class iOSCustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            // ?
        }
    }

Try adapting [this Swift code](https://stackoverflow.com/q/56760335/199364). — ToolmakerSteve, Nov 20 '21 at 00:55
Or try `Margin="-8, 0, 0, 0"`, if the button is at the edge of the page — Shaw, Nov 22 '21 at 02:29

score 1 · Accepted Answer · answered Nov 22 '21 at 05:25

You can use MaskedCorners in your iOS class to control the display of graphics.

Here is my implementation class for your reference:

[assembly: ExportRenderer(typeof(CustomButton),typeof(CurvedCornersButtonRenderer))]
namespace xxx.iOS
{
    class CurvedCornersButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            Control.BackgroundColor = UIColor.Blue;
            Control.ClipsToBounds = true;
            Control.Layer.CornerRadius = 15;
            Control.Layer.MaskedCorners = CoreAnimation.CACornerMask.MaxXMinYCorner | CoreAnimation.CACornerMask.MaxXMaxYCorner;
        }
   
    }
}

for anyone seeing this, make sure you include a "if (Control != null){}" check — Razvan Emil, Nov 23 '21 at 20:59

score 1 · Answer 2 · answered Oct 12 '22 at 09:30

1

The above answer works, but if someone wants to change all corners, must include CoreAnimation.CACornerMask.MinXMinYCorner|CoreAnimation.CACornerMask.MinXMaxYCorner for "MaskedCorners".

answered Oct 12 '22 at 09:30

Pavlos Mavris

331
1
2
12

Xamarin iOS Round only some corners of a Button

2 Answers2