- Contact us page – Part 4a
- Applying borders to the Editor control on iOS – Part 4b (This post)
- App Settings for Xamarin.Forms – Part 5
All code can be found in my Github repository.
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!
How can we solve this problem?
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.
- In the Xamarin Forms PCL project add a new folder call it CustomControls, then add a new empty class call it MyEditor.
public class MyEditor: Editor
- 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 MyEditorRenderer: EditorRenderer
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;
- 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))]
- 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“ …>
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!