xamarin rounded image that scales

Question

I have a Xaml page with a grid with relative heights

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

Now on the middle row (And i don't know it's exact height since it scales with the display size) I want to have a circular image. Since I have not set a heightrequest / widthrequest for the image I think I need to bind it to actual height.

I tried a lot of things resulting in my 'latest effort which is the following code but still does not give the desired result

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

I don't think that there is a way to bind to the value that will be calculated after the layout. If you insist on that you probably need to handle that in the code behind or possibly in some custom renderer. — Ivan Ičin

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-01-17T11:21:08

Since you had set the Height of Row as * . The real size of Frame in runtime depend on the size of Grid . In your case , the Height of Frame equals 1/3 of the Grid and the Width equals the width of the Grid .

If you want to get the value of them .You could create a custom Frame .And rewrite the method 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;
            }
        }

    }
}

This method will been invoked multi times when it been first added to the parent view. The last time it will return the current size . You can do something you want .

xamarin rounded image that scales

1 Answers