Forum Xamarin.Forms

Frame + Images == Round Image? .....false, just an image with the corners cut off

XamtasticXamtastic Member ✭✭✭

Goal is to have images inside a circle.

Currently, the image will appear, but have the corners will be cut off. I tried to increase the size, but the image got resized to the smaller than Frame's height/width.

Is this a fundamental thing in Frames or there a setting I am not aware of?

<Frame WidthRequest="144" 
          <Image Source="{Binding MyPicture}"

No luck in round image when setting the Image to:
- Aspect="AspectFill"
- HorizontalOptions="FillAndExpand"
- VerticalOptions="FillAndExpand"

Best Answer


  • JoeMankeJoeManke USMember ✭✭✭✭✭

    Why are you setting the Image height and width to 400 more than the Frame? Why are you setting the CornerRadius of the Frame to 100 more than its height and width?

    When I wanted a circular ImageButton, I found that the ideal settings were to set the CornerRadius to 1/2 of the Height and Width requests. I assume the same principle would apply here.

  • XamtasticXamtastic Member ✭✭✭
    edited April 2019

    I was trying to push the Image passed the Frame size to get a circle - hoping that would address the cut off edges
    When I do 1/2 the size the image/frame isn't a full circle.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    Can you post some screenshots?

  • XamtasticXamtastic Member ✭✭✭

    Unable to upload, getting an error "Body is 1 character too short."

    ...... it's an image, inside a circle with, corners cut off

                          .   - ~ ~ ~ 
           ,  '|||||||||||||||||||||||||||||||||
        ,      ||||||||||||||||||||||||||||||||| 
      ,        |||||||||||||||||||||||||||||||||               
     ,         |||||||||||||||||||||||||||||||||

    Image size does nothing

  • XamtasticXamtastic Member ✭✭✭


    The default padding was pushing it off. Nailed it! ......thanks @TaylorD
    I don't think I would have figured that one out for at least another week or two!

Sign In or Register to comment.