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

1
votes

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!

2
c#windows-phone-8.1renderingxamarin.forms
I am facing the same issue :( - seba47
In Windows you use the CornerRadius property to make rounded corners. The problem with a Rectangle is: CornerRadius isn't accessible, so I don't think inheriting from BoxViewRenderer isn't the best idea. I see that Frame implements Border in Windows which does expose CornerRadius which may work. - Barnstokkr

2 Answers

0
votes

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.

0
votes

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;
        }