未应用CornerRadius

Question

在我的XAML中，我有以下几段代码来设置框架上的角半径。

<Frame
    Padding="0"
    BackgroundColor="{Binding InitialCircleColor}"
    HasShadow="False"
    HeightRequest="40"
    HorizontalOptions="Start"
    VerticalOptions="Center"
    WidthRequest="40">
    <Frame.CornerRadius>
        <OnPlatform
            x:TypeArguments="x:Single"
            Android="80"
            iOS="20" />
    </Frame.CornerRadius>
    <Label
        Padding="0"
        FontAttributes="Bold"
        FontSize="23"
        HorizontalOptions="Center"
        HorizontalTextAlignment="Start"
        Text="{Binding UserInitials}"
        TextColor="{Binding LetterColoring}"
        VerticalTextAlignment="Center" />
</Frame>

我现在看到的是我的框架是正方形的。

Answer 1

在表单中

public class FrameCornerRadius : RoutingEffect
  {
    public FrameCornerRadius() 
      : base("YourProject.FrameCornerRadiusEffect")
    {
    }

    public float CornerRadius { get; set; }
  }

在iOS中

using Foundation;
using System.Diagnostics;
using System.Linq;
using xxx;
using xxx.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ResolutionGroupName(nameof(xxx))]
[assembly: ExportEffect(typeof(FrameCornerRadiusEffect), nameof(FrameCornerRadiusEffect))]
namespace xxx.iOS
{
  [Preserve(AllMembers = true)]
  public class FrameCornerRadiusEffect : PlatformEffect
  {
    protected override void OnAttached()
    {
      try
      {
        var effect = (FrameCornerRadius)Element.Effects.FirstOrDefault(e => e is FrameCornerRadius);
        if (effect != null)
        {
          Container.Layer.CornerRadius = effect.CornerRadius;
          Container.Layer.MasksToBounds = true;
        }
      }
      catch (System.Exception ex)
      {
        throw new System.Exception($"Cannot set property on attached control. Error: {ex.Message}");
      }
    }

    protected override void OnDetached()
    {
      
    }
  }
}

在Android中

using Android.Graphics;
using Android.Views;
using System.Linq;
using xxx;
using xxx.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ResolutionGroupName(nameof(xxx))]
[assembly: ExportEffect(typeof(FrameCornerRadiusEffect), nameof(FrameCornerRadiusEffect))]
namespace xxx.Droid
{
  class FrameCornerRadiusEffect : PlatformEffect
  {
    protected override void OnAttached()
    {
      try
      {
        var effect = (FrameCornerRadius)Element.Effects.FirstOrDefault(e => e is FrameCornerRadius);
        if (effect != null)
        {
          Control.ClipToOutline = true;
          Control.OutlineProvider = new RoundedOutlineProvider(effect.CornerRadius);
        }
      }
      catch (System.Exception ex)
      {
        throw new System.Exception($"Cannot set property on attached control. Error: {ex.Message}");
      }
    }

    protected override void OnDetached()
    {
    }
    
    private  class RoundedOutlineProvider : ViewOutlineProvider
    {
      private readonly float radius;
      public RoundedOutlineProvider(float radius)
      {
        this.radius = radius;
      }
      public override void GetOutline(Android.Views.View view, Outline outline)
      {
        outline?.SetRoundRect(0, 0, view.Width, view.Height, radius);
      }
    }
  }
}

你可以像这样使用它

<Frame.Effects>
     <local:FrameCornerRadius CornerRadius="{OnPlatform Android='50', iOS='15'}" />
</Frame.Effects>