All code can be found in my Github repository.

The Problem:

When using Xamarin Forms editor on iOS, people tend to not notice the control itself as it has the same background color as the content view itself with no borders. In other words, it’s invisible!
Screen Shot 2017-10-15 at 2.25.30 PMHow can we solve this problem?

The Solution:

In order to fix this issue, we need to create a new custom control by subclassing Editor control in Xamarin Forms project (PCL) Why? because we need to keep the regular Xamarin Forms editor without manipulation in case we wanted to use it later on (I doubt 😅) and then create a new custom renderer for this control on iOS platform only.

  1. In the Xamarin Forms PCL project add a new folder call it CustomControls, then add a new empty class call it MyEditor.

        public class MyEditorEditor
            public MyEditor()

  2. Add a new folder in the iOS project call it CustomRenderers then and a new class file call it MyEditorRenderer to intercept the element (Xamarin Forms control) rendering process to control (iOS control). Then override the OnElementChanged method that renders the native control and writes logic to customize the control.

        public class MyEditorRendererEditorRenderer
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e)
                if (Control != null)
                    Control.Layer.CornerRadius = 4;
                    Control.Layer.BorderColor = Color.LightGray.ToCGColor();
                    Control.Layer.BorderWidth = 1;

  3. Add an ExportRenderer attribute to the custom renderer class to specify that it will be used to render the Xamarin.Forms control. This attribute is used to register the custom renderer with Xamarin.Forms.

    [assembly: ExportRenderer(typeof(MyEditor), typeof(MyEditorRenderer))]
    namespace PuzzlersJordan.iOS.CustomRenderers

  4. To consume this, it can be referenced in contact us XAML in the PCL project by declaring a namespace for its location and using the namespace prefix on the control element as follows:

    <ContentPage … xmlns:local=clr-namespace:PuzzlersJordan.CustomControls;assembly=PuzzlersJordan …>

    <local:MyEditor HeightRequest=90>

    Note: The local namespace prefix can be anything. However, the namespace and assembly values must match the details of the custom control. Once the namespace is declared, the prefix is used to reference the custom control

Voila, there you are!

Screen Shot 2017-10-15 at 8.15.22 PM


One thought on “Applying borders to the Editor control on iOS – Part 4b

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s