Xamarin框架只有一个圆角

Question

简单的问题。我需要一个只有一个圆角的框架，而不是全部四个。如何仅使框架的一个角变圆（在我的情况下为右上角）？

用另一种方式表达它：如何设置框架的仅一个角的角半径？

Answer 1

使用自定义渲染帧的另一种方式。

1.创建类名CustomFrame，继承Frame类，在PCL中添加BindableProperty CornerRadiusProperty。

 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. 在 Android 中创建 CustomFrameRender。

   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.在表单中使用custonframe。

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

有关这方面的更多详细信息，请参阅：

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

Answer 2

最简单的方法是使用Nuget PancakeView。

您可以在每个顶点中指定CornerRadius，以实现所需的效果：

例：

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

您可以在官方页面上阅读更多内容。