Xamarin Frame only have a single rounded corner

Question

Simple question. I need a frame with only one rounded corner, instead of all four. How can I only round one of the corners of a frame (top right in my case)?

Another way to phrase it: How can I set the cornerradius of only one corner of a frame?

Answer 1

The easy way is to use the Nuget PancakeView.

You can specify the CornerRadius in each vertice, achieving the desired effect:

Example:

<yummy:PancakeView BackgroundColor="Orange"CornerRadius="60,0,0,60"/>

You can read more in the official page.

Answer 2

Another way it to use custom render for frame.

1.Create class name CustomFrame, inherit Frame class, add BindableProperty CornerRadiusProperty in PCL.

 public class CustomFrame: Frame
{
    public static new readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CustomFrame), typeof(CornerRadius), typeof(CustomFrame));
    public CustomFrame()
    {
        // MK Clearing default values (e.g. on iOS it's 5)
        base.CornerRadius = 0;
    }

    public new CornerRadius CornerRadius
    {
        get => (CornerRadius)GetValue(CornerRadiusProperty);
        set => SetValue(CornerRadiusProperty, value);
    }

}

2. create CustomFrameRender in Android.

   using FrameRenderer = Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer;
   
   [assembly: ExportRenderer(typeof(CustomFrame), typeof(CustomFrameRenderer))]
   namespace Demo1.Droid
   {
   class CustomFrameRenderer : FrameRenderer
    {
   public CustomFrameRenderer(Context context)
       : base(context)
   {
   }
   
   protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
   {
       base.OnElementChanged(e);
   
       if (e.NewElement != null && Control != null)
       {
           UpdateCornerRadius();
       }
   }
   
   protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
   {
       base.OnElementPropertyChanged(sender, e);
   
       if (e.PropertyName == nameof(CustomFrame.CornerRadius) ||
           e.PropertyName == nameof(CustomFrame))
       {
           UpdateCornerRadius();
       }
   }
   
   private void UpdateCornerRadius()
   {
       if (Control.Background is GradientDrawable backgroundGradient)
       {
           var cornerRadius = (Element as CustomFrame)?.CornerRadius;
           if (!cornerRadius.HasValue)
           {
               return;
           }
   
           var topLeftCorner = Context.ToPixels(cornerRadius.Value.TopLeft);
           var topRightCorner = Context.ToPixels(cornerRadius.Value.TopRight);
           var bottomLeftCorner = Context.ToPixels(cornerRadius.Value.BottomLeft);
           var bottomRightCorner = Context.ToPixels(cornerRadius.Value.BottomRight);
   
           var cornerRadii = new[]
           {
               topLeftCorner,
               topLeftCorner,
   
               topRightCorner,
               topRightCorner,
   
               bottomRightCorner,
               bottomRightCorner,
   
               bottomLeftCorner,
               bottomLeftCorner,
           };
   
           backgroundGradient.SetCornerRadii(cornerRadii);
       }
   }
   
     }
    }
   

3.using custonframe in forms.

<StackLayout>
        <controls:CustomFrame
            BackgroundColor="Red"
            CornerRadius="0,30,0,0"
            HeightRequest="100"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            WidthRequest="100" />
    </StackLayout>

More detailed info about this, please refer to:

https://progrunning.net/customizing-corner-radius/