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?

Solution 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!

Solution 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}"/>

Solution 3

The easiest way is to add a frame around it.

 <Frame BorderColor="LightGray" HasShadow="False" Padding="0">
     <Editor/>
 </Frame>

Solution 4

in your portable project add this control

 public class PlaceholderEditor : Editor
{
    public static readonly BindableProperty PlaceholderProperty =
        BindableProperty.Create("Placeholder", typeof(string), typeof(string), "");

    public PlaceholderEditor()
    {
    }

    public string Placeholder
    {
        get
        {
            return (string)GetValue(PlaceholderProperty);
        }

        set
        {
            SetValue(PlaceholderProperty, value);
        }
    }       
}

in your android project add this renderer:

[assembly: ExportRenderer(typeof(PlaceholderEditor), typeof(PlaceholderEditorRenderer))]
namespace Tevel.Mobile.Packages.Droid
{


public class PlaceholderEditorRenderer : EditorRenderer
{ 

public PlaceholderEditorRenderer() {  }

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

        if (e.NewElement != null)
        {
            var element = e.NewElement as PlaceholderEditor;

            this.Control.Background = Resources.GetDrawable(Resource.Drawable.borderEditText);

            this.Control.Hint = element.Placeholder;
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == PlaceholderEditor.PlaceholderProperty.PropertyName)
        {
            var element = this.Element as PlaceholderEditor;
            this.Control.Hint = element.Placeholder;
        }
    }
}
}

in your Resources > drawable add an XML file borderEditText.xml

 <?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true">
<shape android:shape="rectangle">
  <gradient
      android:startColor="#FFFFFF"
      android:endColor="#FFFFFF"
      android:angle="270" />
  <stroke
      android:width="3dp"
      android:color="#F8B334" />
  <corners android:radius="12dp" />
</shape>
  </item>
  <item>
<shape android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF"  android:angle="270" />
  <stroke android:width="3dp" android:color="#ccc" />
  <corners android:radius="12dp" />
</shape>
  </item>
</selector>

Xaml: Header - xmlns:ctrls="clr-namespace:my control namespace;assembly= my assembly" control:

<ctrls:PlaceholderEditor VerticalOptions="Fill" HorizontalOptions="StartAndExpand" Placeholder="add my comment title">
        </ctrls:PlaceholderEditor>

Solution 5

You will need to implement a Custom Renderer (guide from Xamarin) for each platform since customizing the BorderColor of an Entry is not yet supported in Xamarin.Forms.

Since you've already managed to change the BorderColor on Android, you can find a solution for iOS here: http://forums.xamarin.com/discussion/comment/102557/#Comment_102557

View more solutions

Comments

[AdvApp]

Note that the "custom" entry in <custom:BorderedEditor... is the name associated with your PCL project namespace. So, for this to work as written, you would have to have a reference in your <ContentPage tag of xmlns:custom="clr-namespace:<project_name>". Since using "local" is more common for the namespace reference, you may want to use that instead; e.g., <local:BorderedEditor...

[Edward Brey]

CornerRadius 6, BorderColor LightGray, and BorderWidth .5f better matches the default border for Entry.

[Gerardo Tarragona]

A little more explanation and this answer would be pretty good for a blog's entry!

[Gil Sand]

Not fancy indeed, but fast enough for the generic client who wants his app for yesterday.

[Nk54]

As @EdwardBrey told, it better matches the default look of iOS with a Border set to 6 and and a border width set to 0.5f. Thank you Edward

[Nk54]

Try the color #cccccc because it is more accurate than LightGray.

[cesar-moya]

For a perfect match use color #CECECE with BorderWidth = 1.