可缩放的 xamarin 圆形图像

Question

我有一个带有相对高度网格的 Xaml 页面

<RowDefinition Height="1*">
<RowDefinition Height="2*">
<RowDefinition Height="3*">

现在在中间行（我不知道它的确切高度，因为它会随显示尺寸缩放）我想要一个圆形图像。由于我没有为图像设置 heightrequest / widthrequest 我想我需要将它绑定到实际高度。

我尝试了很多东西，结果是我的“最新努力”是以下代码，但仍然没有给出想要的结果

<!-- try 1 -->
<yummy:PancakeView BackgroundColor="Aqua" CornerRadius="{Binding Source={RelativeSource Self}, Path=ActualHeight, Converter={converters:PercentageConverter}, ConverterParameter='0,5'}" IsClippedToBounds="True" BorderColor="Black" BorderThickness="4">
  <Image Source="{Binding NarrationImage}"  ></Image>
</yummy:PancakeView>

<!-- try 2 -->
<Grid x:Name="RefGrid" WidthRequest="1"></Grid>
<Frame 
  HeightRequest="{Binding Path=ActualHeight, Source={x:Reference RefGrid}}" 
  WidthRequest="{Binding Path=ActualHeight, Source={x:Reference RefGrid}}" 
  CornerRadius="{Binding Path=ActualHeight, Source={x:Reference RefGrid}}" 
  IsClippedToBounds="True" Padding="0" VerticalOptions="CenterAndExpand">
    <Image  Source="{Binding NarrationImage}"  Aspect="AspectFill"></Image>                                    
</Frame>

Answer 1

由于您已将 Row 的 Height 设置为 * 。运行时 Frame 的实际大小取决于 Grid 的大小。在您的情况下，框架的高度等于网格的 1/3，宽度等于网格的宽度。

如果你想获取它们的值。你可以创建一个自定义 Frame 。并重写方法 OnSizeAllocated

using Xamarin.Forms;
namespace App10
{
    public class MyFrame:Frame
    {

        protected override void OnSizeAllocated(double width, double height)
        {

            if(width>0&&height>0)
            {
                var size =width<height ?  width: height ;

                CornerRadius = (float)size / 2;
            }

            base.OnSizeAllocated(width, height);
        }

       public MyFrame()
       {
            SizeChanged += MyFrame_SizeChanged;
       }

        private void MyFrame_SizeChanged(object sender, EventArgs e)
        {
           var width = this.Width;
            var height = this.Height;

            if (width > 0 && height > 0)
            {
                var size = width < height ? width : height;

                CornerRadius = (float)size / 2;
            }
        }

    }
}

此方法在首次添加到父视图时会被多次调用。最后一次它将返回当前大小。你可以做你想做的事。