Search code examples
xamarinxamarin.formsxamarin.androidxamarin.ios

Xamarin Create rounded image using a Frame

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?

Solution

  • 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.