c# – Border Color for Editor in Xamarin.Forms-ThrowExceptions

Exception or error:

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?

How to solve:

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!

###

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

###

The easiest way is to add a frame around it.

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

###

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>

###

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

###

This works for sure, try this.

Android Renderer

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;

    [assembly: ExportRenderer(typeof(Entry), typeof(some.namespace.EntryRenderer))]
    namespace some.namespace
    {
        public class EntryRenderer : Xamarin.Forms.Platform.Android.EntryRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
            {
                base.OnElementChanged(e);
                if (Control == null || Element == null || e.OldElement != null) return;

                var customColor = Xamarin.Forms.Color.FromHex("#0F9D58");
                Control.Background.SetColorFilter(customColor.ToAndroid(), PorterDuff.Mode.SrcAtop);
            }
        }
    }

###

easy way to android renderer

if (((Editor)Element).HasBorder)
                {
                    GradientDrawable gd = new GradientDrawable();
                    gd.SetColor(Android.Resource.Color.HoloRedDark);
                    gd.SetCornerRadius(4);
                    gd.SetStroke(2, Android.Graphics.Color.LightGray);
                    Control.SetBackground(gd);
                }

###

Build a Custom Control as a Grid. Build BoxViews around it and place the Editor in the middle with margin.
Not nice but simple…

    <Grid xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:CustomControls="clr-namespace:xxx.CustomControls"
             x:Class="xxx.CustomControls.EditorWithBorder" BackgroundColor="White"
                x:Name="this">
    <Grid.RowDefinitions>
        <RowDefinitionCollection>
            <RowDefinition Height="1"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1"/>
        </RowDefinitionCollection>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinitionCollection>
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1"/>
        </ColumnDefinitionCollection>
    </Grid.ColumnDefinitions>

    <Editor Text="{Binding Source={x:Reference this},Path=EditorText, Mode=TwoWay}" TextColor="Orange" Margin="20,10,20,10" FontSize="{StaticResource FontSizeLarge}"
                                Grid.Row="1" Grid.Column="1" />


    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Orange"
             ></BoxView>

    <BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" BackgroundColor="Orange"

             ></BoxView>

    <BoxView Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" BackgroundColor="Orange" HeightRequest="1"

             ></BoxView>
    <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Orange" HeightRequest="1"

             ></BoxView>
</Grid>

Leave a Reply

Your email address will not be published. Required fields are marked *