CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.androidxamarin.ios
A. Vreeswijk
A. Vreeswijk

Reputation: 954

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?

Upvotes: 5

Views: 6966

Answers (3)

Junior Jiang
Junior Jiang

Reputation: 12723

if you need a 70*70 Image shown in Grid and need ColumnSpan = 2 . I have tested in my local project with the following codes , it works. Have a look as follows:

<Grid BackgroundColor="GreenYellow">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Frame Grid.Row="0"
           Grid.Column="1"
           Grid.ColumnSpan="2"
           Padding="0"
           HorizontalOptions="CenterAndExpand"
           VerticalOptions="Center"
           CornerRadius="100"
           IsClippedToBounds="True"
           HeightRequest="70"
           WidthRequest="70"
           BackgroundColor="SaddleBrown">
        <Image Source="icon.png"
               VerticalOptions="FillAndExpand"
               HorizontalOptions="FillAndExpand" />
    </Frame>
</Grid>

Effect :

enter image description here

Upvotes: 5

bhavya joshi
bhavya joshi

Reputation: 1136

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.

Upvotes: 5

ayberkzeray
ayberkzeray

Reputation: 203

Corner radius should be half of your picture height if you want circled image. For example, CornerRadius="35" IsClippedToBounds="True" HeightRequest="70".

Upvotes: 2

Related Questions