Xamarin Forms中的圆形图像不是一个完美的圆圈

Question

我有一个使用此处代码的图像渲染器：https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

public class ImageCircleRenderer: ImageRenderer
{
    private void CreateCircle()
    {
        try
        {
            double min = Math.Min(Element.Width, Element.Height);
            Control.Layer.CornerRadius = (float)(min / 2.0);
            Control.Layer.MasksToBounds = false;
            Control.ClipsToBounds = true;
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Unable to create circle image: " + ex);
        }
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null || Element == null)
        {
            return;
        }

        CreateCircle();
    }

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

        if (e.PropertyName == VisualElement.HeightProperty.PropertyName ||
            e.PropertyName == VisualElement.WidthProperty.PropertyName)
        {
            CreateCircle();
        }
    }
}

然后我设置了我的表格视图，其中包含一张包含照片的视图单元格。

像这样：

    private void SetTableView()
    {
        int photoSize = 120;
        var photo = new ImageCircle
        {
            Source = "profile_placeholder.png",
            WidthRequest = photoSize,
            HeightRequest = photoSize,
            Aspect = Aspect.AspectFill,
            HorizontalOptions = LayoutOptions.Center,
            Scale = 1.0
        };

        Content = new TableView
        {
            HasUnevenRows = true,
            Intent = TableIntent.Menu,
            Root = new TableRoot()
            {
                new TableSection()
                {
                    new ViewCell
                    {
                        Height = photoSize,
                        View = new StackLayout
                        {
                            Orientation = StackOrientation.Horizontal,
                            HorizontalOptions = LayoutOptions.Start,
                            VerticalOptions = LayoutOptions.Start,
                            Padding = 15,
                            Children =
                            {
                                photo,
                                new Label
                                {
                                    Text = "Casa de Férias"
                                }
                            }
                        }
                    }
                }

            }

        };

    }

不幸的是，结果如下：

如何让这张照片成为一个完美的圆圈？我不明白为什么这不起作用的原因......

我设置了相同的宽度和高度，它应该填充可用空间，保持纵横比在图像的Aspect属性中定义。

我错过了什么？

谢谢！

编辑：我尝试使用James Montemagno的ImageCircle插件，同样的事情发生了。我猜测我的布局有问题吗？

Answer 1

上面的代码，关于裁剪的圆形图像是正确的，但是：

TableView的ViewCell中设置的高度正在缩小图像，导致它失去所需的宽高比。这是因为高度小于图像的高度+应用的顶部和底部填充：

我已经将填充重构为变量：

int padding = 15;

然后，在配置ViewCell的高度时，我会考虑图像的高度+所需的填充。

new ViewCell
{
    Height = photoSize + padding*2,
    View = new StackLayout
    {
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Start,
        VerticalOptions = LayoutOptions.Start,
        Padding = padding,
        Children =
        {
            photo,
            new Label
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                VerticalOptions = LayoutOptions.Center,
                Text = "Casa de Férias"
            }
        }
    }
}

细胞的ImageCircle现在是一个完美的圆圈。

修改

经过一些重构：

public class ProfileCell: ViewCell
{

    private static int photoSize = 75;
    private static int viewCellPadding = 15;

    public ProfileCell(ImageSource source, string description)
    {
        var photo = new ImageCircle
        {
            Source = source,
            WidthRequest = photoSize,
            HeightRequest = photoSize,
            HorizontalOptions = LayoutOptions.Center,
            Aspect = Aspect.AspectFill,
            Scale = 1.0
        };

        Height = photoSize + (viewCellPadding * 2);
        View = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start,
            Padding = viewCellPadding,
            Children =
            {
                photo,
                new Label
                {
                    HorizontalOptions = LayoutOptions.StartAndExpand,
                    VerticalOptions = LayoutOptions.Center,
                    Text = description
                }
            }
        };
    }

}

现在可以将单元格放在TableView中，例如：

new TableSection()
{
    new ProfileCell(ImageSource.FromFile("profile_placeholder.png"), "Description")
}