Question

简单的问题。我需要一个只有一个圆角的框架，而不是全部四个。我怎么只能倒圆角（我的情况是右上角）？

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

Answer 1

简单的方法是使用Nuget PancakeView。

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

示例：

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

您可以在official page.

中阅读更多内容

Answer 2

使用自定义渲染框架的另一种方法。

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

}

在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 3

使用nuget包Xamarin.Forms.PancakeView。

看看这个答案是否有类似问题：

https://stackoverflow.com/a/59650125/5869384

Answer 4

这是用于UWP渲染器

我使用了Cherry Bu-MSFT的解决方案，并将其更改为UWP。在我的项目中，我在Android，iOS和UWP中使用了它，并且工作正常。

using System.ComponentModel;
using Windows.UI.Xaml.Media;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(CustomFrame), typeof(yourNamespace.UWP.CustomFrameRenderer))]
namespace yourNamespace.UWP
{
    public class CustomFrameRenderer : FrameRenderer
    {
        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()
        {
            var radius = ((CustomFrame)this.Element).CornerRadius;
            Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(radius.TopLeft, radius.TopRight, radius.BottomRight, radius.BottomLeft);
        }
    }
}

Answer 5

我使用的简单解决方案是在圆形框架后面设置另一个框架

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.05*"/>
        <RowDefinition Height="0.05*"/>
        <RowDefinition Height="0.8*"/>
        <RowDefinition Height="0.05*"/>
        <RowDefinition Height="0.05*"/>
    </Grid.RowDefinitions>


    <Frame
        Grid.Row="4"
        Padding="0"
        BackgroundColor="Green"
        CornerRadius="0"/>
    
    <Frame
        Grid.Row="3"
        Grid.RowSpan="2"
        Padding="0"
        BackgroundColor="Green"
        HasShadow="True"
        CornerRadius="20">
    </Frame>

</Grid>

Xamarin框架只有一个圆角

5 个答案:

这是用于UWP渲染器