圆形框架中的图像不符合 iOS 上的框架，但不符合 Android答案

【问题标题】：Image in rounded frame fails to conform to the frame on iOS but not Android圆形框架中的图像不符合 iOS 上的框架，但不符合 Android
【发布时间】：2017-11-08 20:41:37
【问题描述】：

我在 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 上的外观。

【问题讨论】：

标签： android ios xamarin.forms

【解决方案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;
        }
    }
}

【讨论】：

【解决方案2】：

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

为什么要在框架上设置 5 的填充？

【讨论】：

哦，是的。忘记删除了。我实际上是在一个框架中创建一个边框。我删除了内部框架，因为示例代码不需要它。