xamarin округленное изображение, которое масштабируется

Question

У меня есть страница Xaml с сеткой с относительными высотами

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

Теперь в среднем ряду (и я не знаю, какая это точная высота, так как она масштабируется с размером дисплея) Я хочу иметь круговое изображение. Поскольку для изображения я не установил запрос высоты / ширины запроса, я думаю, что мне нужно привязать его к фактической высоте.

Я много чего пробовал, что привело к моим последним усилиям, а именно к следующему коду, но по-прежнему нет дать желаемый результат

<!-- 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

Так как вы установили Height строки как *. Реальный размер Frame во время выполнения зависит от размера Grid. В вашем случае, высота кадра равна 1/3 сетки, а ширина равна ширине сетки.

Если вы хотите получить их значение. Вы можете создать пользовательский фрейм. И переписать метод 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;
            }
        }

    }
}

Этот метод будет вызываться несколько раз когда он был впервые добавлен в родительский вид. В последний раз он вернет текущий размер. Вы можете делать то, что вы хотите.