圆形框架中的图像无法与iOS上的框架相符，但不符合Android

Question

我在Xamarin Forms中有一些XAML创建一个包含图像的圆框。

        <Frame CornerRadius="45" HasShadow="false" BackgroundColor="White" Padding="5" HorizontalOptions="End" VerticalOptions="End" HeightRequest="80" WidthRequest="80" Margin="10">
            <Image Source="camerabutton.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Scale="1.5">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                                Command="{Binding CameraPageCommand}"
                                CommandParameter="camerabutton"
                                Tapped="OnCameraClicked"/>
                </Image.GestureRecognizers>
            </Image>
        </Frame>

我知道在iOS方面似乎存在关于框架元素的一些问题，但我希望有人可以帮助我解决这个问题。

在Android上，它完全按照预期工作，完美地切除了角落并显示图像的圆形切口。但在iOS上，图像只是重叠，见下图。

这显然不是我想要的，我的偏好是让它符合它在Android上的外观。

Answer 1

解决方案1： 首先，您尝试设置框架IsClippedToBounds="true"的属性

或

解决方案2： 在IOS上添加渲染，这里是渲染器代码：

[assembly: ExportRenderer(typeof(Frame), typeof(CustomFrameRenderer))]
namespace YOU_IOS_NAMESPACE
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        var view = (CustomFrame)Element;

        if (view != null)
        {
           Layer.CornerRadius = (nfloat)view.CornerRadius;
           Layer.MasksToBounds = true;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        var view = (CustomFrame)Element;

        if (view != null)
        {
            Layer.CornerRadius = (nfloat)view.CornerRadius;
            Layer.MasksToBounds = true;
        }
    }
}

Answer 2

我已经使用Frame控件遇到过这种错误。也许你可以尝试使用另一个像这样的控件：https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/RoundedBoxView

为什么你在画面上设置5的填充？