Extended Editor in Xamarin Forms

In this article I’m going to show you how to customize the Editor control. We will add the following functionalities:

• Auto expand
• Adding Corner Radius
• Adding a Placeholder

Converting our editor to auto expandable

Sometimes we need an expandable editor, to allow the user to write long text and be able to see the complete text. This is what happens right now when trying to do it:

To solve this issue in Android you just have to add a custom control and in the TextChanged event call InvalidateMeasure().

public class ExtendedEditorControl : Editor
    {
        public ExtendedEditorControl() 
        {
            TextChanged += OnTextChanged;
        }
        private void OnTextChanged(object sender, TextChangedEventArgs e)
        {
             InvalidateMeasure();
        }
    }

On iOS you need a custom renderer to disable the native IsScrollEnable property.

Control.ScrollEnabled = false;

Adding Corner Radius

By default on iOS the Editor has a corner radius 0 and Android does not have borders.

To support this, I created a custom renderer and in the OnElementChanged method setted those properties:

iOS:

Control.Layer.CornerRadius = 5;

Android:

GradientDrawable gd = new GradientDrawable();
gd.SetCornerRadius(5);
gd.SetStroke(2, Color.Black.ToAndroid());
this.Control.Background = gd;

Check that I’m assigning the color and the radius in the renderer, if you want to add it dynamically you can create a bindable property.

Result:

Adding a Placeholder

To add the placeholder we will create a custom renderer for each platform and will use their native apis to handle the placeholder.

Android

Set the hint text

Control.Hint = “Text to show”; 

Set the hint color

Control.SetHintTextColor(CustomControl.PlaceholderColor.ToAndroid());

To be able to change this dynamically we will create bindable properties to set this values from Forms.

iOS

iOS does not support placeholders in Editors so we will add a UILabel as a subview and we will hide it according the editor’s text if null or not.

_placeholderLabel.Hidden = !string.IsNullOrEmpty(Control.Text);   

Result:

To put everything together I created an Extendable Editor Control that support these three features. Also it uses bindable properties to allow changing their values in runtime.

Control:

Android:

iOS:

Forms:

Here is the sample full source code:

https://github.com/CrossGeeks/ExtendedEditorSample

References:
https://forums.xamarin.com/discussion/92439/automatic-expandable-editor

Happy editing!