xamarinxamarin.formsframecornerradius

Xamarin Frame only have a single rounded corner


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/