[FIXED] Xamarin Frame only have a single rounded corner

Issue

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?

Solution

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);
    }

}
  1. 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/

Answered By – Cherry Bu – MSFT

Answer Checked By – David Marino (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *