Xamarin Forms native customrenderer

Question

I have followed James Montemagno's guide on how to make a custom renderer for round images in my Xamarin Forms Shared Project.

https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

(being a true copy of the guide it feels redundant to actually add the code itself to my project but please comment if that is not the case)

It is working flawless, however, I need to change the colour of the circle border dynamically with the press of a button when the app is running.

But since the colour of the circle is set natively in each renderer I am uncertain how I could possibly change it from my shared code.

Excellent suggestion and definitely ideal. My own attemps to do so have been futile, hence the question. — Morten J Petersen, Oct 12 '17 at 13:21
[ImageCirclePlugin](https://github.com/jamesmontemagno/ImageCirclePlugin) already has a `BorderColor` that you can update in shared code. The renderers will detect the change and update accordingly. — Sharada Gururaj, Oct 12 '17 at 16:10
You can refer for more details [here](https://github.com/jamesmontemagno/ImageCirclePlugin/blob/master/src/ImageCircle.Forms.Plugin.Abstractions/CircleImage.cs#L42) for shared control; [iOS renderer](https://github.com/jamesmontemagno/ImageCirclePlugin/blob/master/src/ImageCircle.Forms.Plugin.iOSUnified/ImageCircleRenderer.cs#L49) - [Android renderer](https://github.com/jamesmontemagno/ImageCirclePlugin/blob/master/src/ImageCircle.Forms.Plugin.Android/ImageCircleRenderer.cs#L52) — Sharada Gururaj, Oct 12 '17 at 16:14

score 1 · Accepted Answer · answered Oct 12 '17 at 15:54

Maybe this snippet can help:

public class CircleImage : Image
{

    public static readonly BindableProperty CurvedBackgroundColorProperty =
        BindableProperty.Create(
            nameof(CurvedBackgroundColor),
            typeof(Color),
            typeof(CurvedCornersLabel),
            Color.Default);

    public Color CurvedBackgroundColor
    {
        get { return (Color)GetValue(CurvedBackgroundColorProperty); }
        set { SetValue(CurvedBackgroundColorProperty, value); }
    }

}

//Android/iOS

[assembly: ExportRenderer(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace SchedulingTool.iOS.Renderers
{
    public class CircleImageRenderer : ImageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                var xfViewReference = (CircleImage)Element;
                //Here you can reference xfViewReference.CurvedBackgroundColor to assign what ever is binded.
            }
        }
    }
}

I hope you get the main idea, you can create your own bindable properties and access them on the Native Renderer.

If everything does not go as expected you can always download the NuGet (which has everything you need):

https://github.com/jamesmontemagno/ImageCirclePlugin

Xamarin Forms native customrenderer

1 Answers1