Xamarin cross-platform circular image [closed] - image

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How do you create circular clipping mask for images which works in Xamarin Cross-Platform, and how do you implement it within a ListView? I don't want to use plugins. I found some examples but they all target Android Apps only and most of them are written in Java, not C#.

Answer 1

Needs to Write CustomRederers for Image
PCL:
ImageCircle.cs
public class ImageCircle : Image
{
}
Xamarin.Android:
ImageCircleRenderer.cs
Above NameSpace
[assembly: ExportRenderer(typeof(ImageCircle), typeof(ImageCircleRenderer))]
public class ImageCircleRenderer : ImageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
{
base.OnElementChanged(e);
if (e.OldElement == null)
{
if ((int)Android.OS.Build.VERSION.SdkInt < 18)
SetLayerType(LayerType.Software, null);
}
}
protected override bool DrawChild(Canvas canvas, global::Android.Views.View child, long drawingTime)
{
try
{
var radius = Math.Min(Width, Height) / 2;
var strokeWidth = 10;
radius -= strokeWidth / 2;
Path path = new Path();
path.AddCircle(Width / 2, Height / 2, radius, Path.Direction.Ccw);
canvas.Save();
canvas.ClipPath(path);
var result = base.DrawChild(canvas, child, drawingTime);
canvas.Restore();
path = new Path();
path.AddCircle(Width / 2, Height / 2, radius, Path.Direction.Ccw);
var paint = new Paint();
paint.AntiAlias = true;
paint.StrokeWidth = 5;
paint.SetStyle(Paint.Style.Stroke);
paint.Color = global::Android.Graphics.Color.White;
canvas.DrawPath(path, paint);
paint.Dispose();
path.Dispose();
return result;
}
catch (Exception ex)
{
var msg = ex.Message;
}
return base.DrawChild(canvas, child, drawingTime);
}
}
Xamarin.iOS
Above NameSpace
[assembly: ExportRenderer(typeof(ImageCircle), typeof(ImageCircleRender))]
ImageCircleRenderer.cs
public class ImageCircleRender : ImageRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
{
base.OnElementChanged(e);
if (e.OldElement != null || Element == null)
return;
CreateCircle();
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == VisualElement.HeightProperty.PropertyName ||
e.PropertyName == VisualElement.WidthProperty.PropertyName)
{
CreateCircle();
}
}
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.White.ToCGColor();
Control.Layer.BorderWidth = 1;
Control.ClipsToBounds = true;
}
catch (Exception ex)
{
Debug.WriteLine("Unable to create circle image: " + ex);
}
}
}

Answer 2

Use https://www.nuget.org/packages/Xam.Plugins.Forms.ImageCircle
In your iOS, Android, and Windows projects call:
Xamarin.Forms.Init();//platform specific init
ImageCircleRenderer.Init();