Custom renderer for button

Question

I am pulling my hair with this one. I am trying to create a custom renderer in using Xamarin Forms (Portable Class Library-PCL) to get the result showing in image below:

What I need:

1. Rounded corners
2. Button apperance (showing touch)
3. "Normal" button label in center
4. Image in the right corner
5. Smaller text in the lower left.

I have managed to create a custom renderer for a normal button but not being able to add the small text and the image. See image below

Thanks!

Answer 1

Here is the solution for UWP for anyone interested!

[assembly: ExportRenderer(typeof(RoundedButton), typeof(RoundedButtonRenderer))]
namespace Platformspecific.Buttons
{
    public class RoundedButtonRenderer : ViewRenderer<RoundedButton, Windows.UI.Xaml.Shapes.Rectangle>
    {
        Xamarin.Forms.Color originalBackground;
        private RoundedButton _control;

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

            if (e.NewElement != null)
            {
                _control = e.NewElement as RoundedButton;

                originalBackground = _control.CustomBackgroundColor;

                this.PointerPressed += Control_Pressed;
                this.PointerReleased += Control_Released;
                this.PointerExited += Control_Released;

                var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
                rectangle.Width = this.Width; // 100;
                rectangle.Height = this.Height;


                rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 

                rectangle.RadiusX = _control.BorderRadius;
                rectangle.RadiusY = _control.BorderRadius;



                rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
                rectangle.StrokeThickness = _control.BorderWidth;

                this.SetNativeControl(rectangle);


            }
        }


        public static Windows.UI.Color ToMediaColor(Xamarin.Forms.Color color)
        {
            return Windows.UI.Color.FromArgb(((byte)(color.A * 255)), (byte)(color.R * 255), (byte)(color.G * 255), (byte)(color.B * 255));
        }


        void Control_Pressed(object sender, PointerRoutedEventArgs e)
        {


            Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource  as Windows.UI.Xaml.Shapes.Rectangle;


            var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
            rectangle.Width = this.Width; 
            rectangle.Height = this.Height;
            rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 100, 100, 100));
            rectangle.RadiusX = _control.BorderRadius;
            rectangle.RadiusY = _control.BorderRadius;
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
            rectangle.StrokeThickness = _control.BorderWidth;

            this.SetNativeControl(rectangle);

            e.Handled = false;
        }

        void Control_Released(object sender, PointerRoutedEventArgs e)
        {

            Windows.UI.Xaml.Shapes.Rectangle _rectangle = e.OriginalSource as Windows.UI.Xaml.Shapes.Rectangle;


            var rectangle = new Windows.UI.Xaml.Shapes.Rectangle();
            rectangle.Width = this.Width; 
            rectangle.Height = this.Height;
            rectangle.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(((byte)(originalBackground.A * 255)), (byte)(originalBackground.R * 255), (byte)(originalBackground.G * 255), (byte)(originalBackground.B * 255)));
            rectangle.RadiusX = _control.BorderRadius;
            rectangle.RadiusY = _control.BorderRadius;
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.OutlineColor));
            rectangle.StrokeThickness = _control.BorderWidth;



            rectangle.Fill = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 
            rectangle.Stroke = new SolidColorBrush(ToMediaColor(_control.CustomBackgroundColor)); 


            this.SetNativeControl(rectangle);
            e.Handled = false;
        }


    }
}