Xamarin框架只有一个圆角

emeijp43  于 2022-12-07  发布在  其他
关注(0)|答案(6)|浏览(177)

简单的问题。我需要一个只有一个圆角的框架,而不是所有四个。我怎么能只圆一个框架的角(在我的情况下右上角)?
换句话说:如何仅设置帧的一个角的角半径?

qlvxas9a

qlvxas9a1#

简单的方法是使用Nuget PancakeView
可以在每个顶点中指定CornerRadius,以获得所需的效果:
示例:

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

您可以在official page.中了解更多信息

ukxgm1gy

ukxgm1gy2#

另一种方法是对框架使用自定义渲染。
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);
    }

}

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

wgx48brx

wgx48brx3#

使用核心包Xamarin.Forms.PancakeView.

请看下面类似问题的答案:
https://stackoverflow.com/a/59650125/5869384

sr4lhrrt

sr4lhrrt4#

这适用于UWP渲染器

我已经使用的解决方案,从樱桃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);
        }
    }
}
oyxsuwqo

oyxsuwqo5#

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

<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>
7bsow1i6

7bsow1i66#

您可以使用BoxView代替Frame

<Grid Margin="10,10,80,10">
    <BoxView Color="#CCE4FF"
             CornerRadius="10,10,10,0"
             HorizontalOptions="Fill"
             VerticalOptions="Fill" />
    <Grid Padding="10">
        <Label Text="This is my message"
           FontSize="14"
           TextColor="#434343"/>
    </Grid>
</Grid>

result view

相关问题