locked
How to make a squared image to a round image on xamarin forms ? RRS feed

  • Question

  • User236402 posted

    Is it possible to make a round image on Xamarin Forms of a squared image. I have a lot of images which should be displayed as a circle on ListView along with its name etc. But how can I do this?

    I tried like this, but it is not working and it threw an error "Type ImageBrush not found in xmlns http://xamarin.com/schemas/2014/forms"

    Tuesday, December 13, 2016 8:14 PM

Answers

  • User180523 posted

    @SJ-87 You've seen the CirlceImage plugin. Right? https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, December 13, 2016 8:55 PM

All replies

  • User180523 posted

    @SJ-87 You've seen the CirlceImage plugin. Right? https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, December 13, 2016 8:55 PM
  • User236402 posted

    @ClintStLaurent Yes.

    Tuesday, December 13, 2016 10:09 PM
  • User316826 posted

    Check out Xam.Plugins.Forms.ImageCircle

    Wednesday, December 6, 2017 9:37 AM
  • User366545 posted

    You don't need a plugin or a custom renderer to do that. It's simpler than you might think. Here is how to do it:

    <Frame HasShadow="False" WidthRequest="70" HeightRequest="70" CornerRadius="35">
      <Image Source="yourImageNameGoesHere" />
    </Frame>
    
    Thursday, March 22, 2018 2:12 PM
  • User383778 posted

    @Koboki Your answer keeps the Image "square" inside of the round Frame. I tried setting both the Frame and the Image's HorizontalOptions and VerticalOptions to "FillAndExpand", and also tried setting the Image's Aspect to "AspectFill" and "Fill", but nothing worked. Is there a way to fill the image inside of the available space of the round Frame?

    Friday, April 12, 2019 3:50 PM
  • User394800 posted

    I know this post is really old but just in case anyone else comes here looking for an answer @Koboki solution will work you just need to make sure that your frame padding is set to 0. Here is an example from my current project:

            <Frame x:Name="userFrame" HasShadow="False" WidthRequest="128" HeightRequest="128" CornerRadius="64" 
                  Padding="0">
               <Image x:Name="userAV" Source="{DynamicResource currentAVI}"/>
            </Frame>
    

    Result :

    Monday, June 29, 2020 11:55 PM