c# - 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();
        }
    }
}

然后我设置我的表格 View ，其中包含一个包含照片的 View 单元格。

像这样:

    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"
                                }
                            }
                        }
                    }
                }

            }

        };

    }

不幸的是，结果是这样的:

如何让这张图变成正圆？我看不出为什么这不起作用的任何原因......

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

我错过了什么？

谢谢!

编辑:我尝试使用 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")
}