Search code examples
xamarin.formscircleimage

Xamarin forms: Image is not showing in perfect circle

I already posted a question regarding this issue, never get any solution. So posting the same question with more details and findings.

For the circle images, I am using Xam.Plugins.Forms.ImageCircle nuget package in my project, which is working fine in android and windows but showing an oval shape in IOS, screenshot adding below.

enter image description here

Added ImageCircleRenderer.Init(); in AppDelegate.cs.

xmlns namespace added:

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"  

  <controls:CircleImage 
          HorizontalOptions="Start"
          VerticalOptions="Start"
          Margin="0,0,0,-5"
          WidthRequest="50" 
          Aspect="AspectFill"
          BorderColor="#1C7DB4"
          BorderThickness="2"
           HeightRequest="50" />

Now I updated the Xam.Plugins.Forms.ImageCircle to 2.0.2 and the resulted image is adding below:

enter image description here

Thanks in advance

Solution

  • It looks as if you are displaying the circles in a ListView, which has a fixed height of the cells per default. It seems as if your cells are simply not high enough to give the CircleImages the space they need. You have two options to overcome this:

    • Set the cells heigth to a fixed value that is high enough.
      • I don't know the exact value of the cells padding, so you'll have to experiment a bit. Maybe start off with something around 60

    <ListView RowHeight="60" ...>

    • Set HasUnevenRows="true"
      • I believe that this will fix the rows height automagically, but it comes at costs: There may be a negative impact on layouting your view.

    <ListView HasUnevenRows="true">