Custom Renderer not Rendering Xamarin Forms

Question

I am trying to implement a custom renderer in my Xamarin Forms project (PCL). I am trying to curve the corners of a label. Problem is that its not rendering. I threw a debug in the relevant files and they are being hit but they dont seem to be rendering.

Here is the subclass for the label:

public class CurvedCornersLabel:Label
{
    public static readonly BindableProperty CurvedCornerRadiusProperty =
         BindableProperty.Create(
            nameof(CurvedCornerRadius),
            typeof(double),
            typeof(CurvedCornersLabel),
            12.0);

    public double CurvedCornerRadius
    {
        get { return (double)GetValue(CurvedCornerRadiusProperty); }
        set { SetValue(CurvedCornerRadiusProperty, value); }
    }


    public static readonly BindableProperty CurvedBackgroundColorProperty =
        BindableProperty.Create(
            nameof(CurvedCornerRadius),
            typeof(Color),
            typeof(CurvedCornersLabel),
            Color.Default);
    public Color CurvedBackgroundColor
    {
        get { return (Color)GetValue(CurvedBackgroundColorProperty); }
        set { SetValue(CurvedBackgroundColorProperty, value); }
    }
}

This is the renderer for Android:

    [assembly: ExportRenderer(typeof(CurvedCornersLabel), typeof(CurvedCornerLabelRenderer))]
namespace CarouselDemo.Droid
{
    public class CurvedCornerLabelRenderer:LabelRenderer
    {
        private GradientDrawable _gradientBackground;

        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            var view = (CurvedCornersLabel)Element;
            if (view == null) return;

            // creating gradient drawable for the curved background
            _gradientBackground = new GradientDrawable();
            _gradientBackground.SetShape(ShapeType.Rectangle);
            _gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());

            // Thickness of the stroke line
            _gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());

            // Radius for the curves
            _gradientBackground.SetCornerRadius(
                DpToPixels(this.Context,
                Convert.ToSingle(view.CurvedCornerRadius)));

            // set the background of the label
            Control.SetBackground(_gradientBackground);
        }

        /// <summary>
        /// Device Independent Pixels to Actual Pixles conversion
        /// </summary>
        /// <param name="context"></param>
        /// <param name="valueInDp"></param>
        /// <returns></returns>
        public static float DpToPixels(Context context, float valueInDp)
        {
            DisplayMetrics metrics = context.Resources.DisplayMetrics;
            return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
        }


    }
}

This is the Xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="CarouselDemo.LabelViewDemo"
         xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
         xmlns:local="clr-namespace:CarouselDemo;assembly=CarouselDemo"
        Padding="10,20,10,10">


<StackLayout Padding="20">
    <Label Text="Card 1"
           HeightRequest="100"
           BackgroundColor="LightGoldenrodYellow"
           x:Name="card1"
           />

    <local:CurvedCornersLabel Text="Card 2"
           HeightRequest="100"
           BackgroundColor="LightBlue"
           x:Name="card2"
           Margin="0,-40,0,0"
           CurvedCornerRadius="15"               
           ></local:CurvedCornersLabel>
</StackLayout>

</ContentPage>

Any ideas?

Answer 1

So I found the solution. First I changed the background color in the custom renderer to red and this was showing rounded corners in red but with blue square corners in the overlay. As soon as I removed the "LightBlue" from the Xaml and set the color via the custom renderer it worked!