Border Color for Editor in Xamarin.Forms

Question

How can i make a border color for Editor in Xamarin.Forms?

I used this link, but it works only for Android. I want it to work in all platforms!

I'm a little bit newbie to this. Please help me.

Any idea?

Answer 1

You may also archieve this by wrapping your Editor with a StackLayout with BackgroundColor="your color" and Padding="1" and set the BackgroundColor of your Editor to the same color of the form.

Something like this:

<StackLayout BackgroundColor="White">
      <StackLayout BackgroundColor="Black" Padding="1">
          <Editor BackgroundColor="White" />
      </StackLayout>
  ...
</StackLayout>

Not that fancy, but this will at least get you a border!

Answer 2

Here's the complete solution I used. You need three things.

1 - A custom class that implements Editor in your forms project.

public class BorderedEditor : Editor
{

}

2 - A custom renderer for your custom Editor in your iOS project.

public class BorderedEditorRenderer : EditorRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Layer.CornerRadius = 3;
            Control.Layer.BorderColor = Color.FromHex("F0F0F0").ToCGColor();
            Control.Layer.BorderWidth = 2;
        }
    }
}

3 - An ExportRenderer attribute in your iOS project that tells Xamarin to use your custom renderer for your custom editor.

[assembly: ExportRenderer(typeof(BorderedEditor), typeof(BorderedEditorRenderer))]

Then use your custom editor in Xaml:

<custom:BorderedEditor Text="{Binding TextValue}"/>