'Xamarin Forms: Image circle

I need to use a circular image with border, I already tried using the ImageCircle plugin and it is broken in the current version of Xamarin, the border appears outside the image in the iOS version, in the android version works. Also I tried to create a custom renderer but I could not make it work properly, it follows the print of the result of a custom renderer I searched in google:

enter image description here

Code:

private void CreateCircle()
{
    try
    {
        double min = Math.Min(Element.Width, Element.Height);
        Control.Layer.CornerRadius = (float)(min / 2.0);
        Control.Layer.MasksToBounds = false;
        Control.Layer.BorderColor = Color.Red.ToCGColor();
        Control.Layer.BorderWidth = 2;
        Control.ClipsToBounds = true;
    }
    catch (Exception ex)
    {
        Debug.WriteLine("Unable to create circle image: " + ex);
    }
}

The bug occurs only if you set a HeightRequest

c++sharpxamarinxamarin.forms


Solution 1:[1]

You need to ensure that the Image is always in square share and then your renderer will render it properly. It may get a bit complicated as HeightRequest and WidthRequest are just requests and in some layouts may not end up being what they suggest, but then search a bit more about layout as there is always a solution.

Solution 2:[2]

circle image(easy):

<Image Source="Image">
      <Image.Clip>
            <EllipseGeometry Center="30,30"
                             RadiusX="30"
                             RadiusY="30">
            </EllipseGeometry>
      </Image.Clip>
</Image>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivan Ičin
Solution 2 Denys Tsurkanovski

Related Questions