How to round rectangle edges for a windows 8.1 (no silverlight) phone using xamarin forms

Question

I am using Xamarin forms BoxView control and would like to round off the edges in Windows Phone 8.1 (no silverlight). For this I am rendering the control in my windows phone project and setting the radius however it doesn't seem to be doing anything. Below is the renders code I am using:

[assembly: ExportRenderer(typeof(RoundedBox), typeof(RoundedBoxRenderer))]

namespace MyProject.WinPhone.Renderer
{
    public class RoundedBoxRenderer : BoxViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);

            var boxRenderer = e.NewElement;
            RoundedBox rb = (RoundedBox)this.Element;

            if (this.Control != null)
            {
                var boxStyle = new Style(typeof(RoundedBox))
                {
                    Setters = {
                        new Setter {Property = RoundedBox.BackgroundColorProperty, Value = rb.BackgroundColor}
                    }
                };

                SetRoundedBoxRadius();

                boxRenderer.Style = boxStyle;
            }
        }

        private void SetRoundedBoxRadius(double radius)
        {
            ((Windows.UI.Xaml.Shapes.Rectangle)this.Control).RadiusX = 50;
        }
    }
}

RoundedBox is the control I generated in my PCL project that inherits from BoxView

From my findings I don't see what im doing wrong since Xamarin converts the BoxView to a Rectangle shape in windows phones according to:

https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/renderers/

And this shape has the property RadiusX and RadiusY to set the borders radius:

https://msdn.microsoft.com/library/windows/apps/br243371

Any ideas as to what i'm missing? Thanks!

Answer 1

Did you try setting the Stroke (color) and StrockThickness of your rectangle? According to your code, those are not set. Therefore, your rectangle has, in fact, no border.

Answer 2

Hello Just update your SetRoundedBoxRadius function as mentioned below. Your code will work.

private void SetRoundedBoxRadius()
        {
            ((Windows.UI.Xaml.Shapes.Rectangle)this.Control).RadiusX = 50;
            ((Windows.UI.Xaml.Shapes.Rectangle)this.Control).RadiusY = 50;
        }