Xamarin Create rounded image using a Frame

Question

I have a problem. I want to create a rounded image, so I created this code:

<Frame Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" VerticalOptions="Center"
    CornerRadius="100" IsClippedToBounds="True" HeightRequest="70" WidthRequest="70">
    <Image Source="User_Vreesie_Logo.png"
    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
</Frame>

Now I hoped that I would get a rounded image with the size 70x70, but I get very long (width) frame with rounded corners and a tiny squared image in the middle. How can I fix this?

Answer 1

Try these:

1. Frame has default padding of 25.So,set Padding="0"
2. Give HeightRequest/ WidthRequest to the image as Image doesn't seems to automatically scale in Xamarin.
3. Set Aspect="AspectFit" in Image . It will scale the image to FIT the view but there can be white bands OR you can use Aspect="AspectFill" . It will scale the image to fill the entire view but border image parts can get cut.