CODEWITHSUNDEEP
c#xamarinxamarin.forms
Luiz Negrini
Luiz Negrini

Reputation: 666

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

Upvotes: 0

Views: 1770

Answers (3)

Denys Tsurkanovski
Denys Tsurkanovski

Reputation: 67

circle image(easy):

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

Upvotes: 0

Ivan I
Ivan I

Reputation: 9990

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.

Upvotes: 1

Mikolaj Kieres
Mikolaj Kieres

Reputation: 4405

As per Robin's comment, I believe you should try with FFImageLoading library. Use the CircularTransformation. Your XAML code could look like this:

<ffimage:CachedImage Source="your_image.png"
                     HeightRequest="40"
                     WidthRequest="40">
<ffimage:CachedImage.Transformations>
  <fftransformations:CircleTransformation BorderSize="2" BorderHexColor="#FF0000" />
</ffimage:CachedImage.Transformations>            
</ffimage:CachedImage>

I believe that besides the FFImageLoading nuget you will also need to install the FFImageLoading.Transformation

EDIT: Have a look at the offical FFImageLoading CircularTransformation sample code

Upvotes: 1

Related Questions