How to write a custom TextField / Entry in Xamarin Forms

Hi Guys,
Today i am going to teach you about how to create a custom TextField in Xamarin Forms.
In Xamarin, we called it as custom renderers.
Custom renderers ?
Hmmm…
It seems not much familiar to people who are new to Xamain Forms App developments. Don’t worry, my ambition is to teach you from the beginning. Before going to write a custom renderer, we have to understand how Xamarin Forms work.

Lets say, that we have created a button in a Xamarin.Forms Page.

<?xml version=“1.0“ encoding=“UTF–8“?>
<ContentPage xmlns=“http://xamarin.com/schemas/2014/forms“ xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml“ x:Class=“MyApp.HomePage“>
    <ContentPage.Content>
        <Button Text=“My Button“/>
    </ContentPage.Content>
</ContentPage>

Xamarin compiler will handle this code according to following diagram.

As you see in the diagram, your button will be rendered on each of platforms via platform specific renderer classes. These are defined in Xamarin.Forms package. This is how Xamarin Forms work.

Now guess, what we have to do in order to create a custom control.

Inheritance ?

Exactly… 🙂

Create our own renderer class which is inherited from Xamarin.Forms renderer class.

Thats the plan… 🙂

Lets create…

Note: In Xamarin.Forms, TextField is defined as Entry.

Lets create an Entry with a BoxBorder…

Create a HomePage and set it as the main page

Create following classes,

1. Create BoxBorderEntry class in BoxEntry project
2. Create BoxBorderEntryRenderer class in BoxEntry.Droid project
3. Create BoxBorderEntryRenderer class in BoxEntry.iOS project

BoxBorderEntry.cs

using Xamarin.Forms;

namespace BoxBorderEntry
{
    public class BoxBorderEntry : Entry
    {
        public BoxEntry()
        {
        }
    }
}

BoxBorderEntryRenderer.cs   –  In iOS

using BoxEntry;
using BoxEntry.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(BoxBorderEntry), typeof(BoxBorderEntryRenderer))]
namespace BoxEntry.iOS
{
    public class BoxBorderEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.TextColor = UIColor.Black;
                Control.Layer.BorderColor = UIColor.Black.CGColor;
                Control.Layer.BorderWidth = 3.0f;
            }
        }
    }
}

BoxBorderEntryRenderer.cs  – In Droid

using BoxEntry;
using BoxEntry.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(BoxBorderEntry), typeof(BoxBorderEntryRenderer))]
namespace BoxEntry.Droid
{
    public class BoxBorderEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SetBackgroundResource(Resource.Drawable.BoxBorder);
            }
        }
    }
}

BoxBorder.xml  –  Create a style xml for Android in Resources -> drawable folder

<?xml version=“1.0“ encoding=“utf–8“?>
<shape xmlns:android=“http://schemas.android.com/apk/res/android“ android:thickness=“0dp“ android:shape=“rectangle“>
    <stroke android:width=“3dp“ android:color=“#000000“ />
</shape>

Save all.

Now our BoxBorderEntry is ready to use… 🙂

Shall we  ?

Before we use our custom control, we have to make a reference variable in the Xamal code.

xmlns:local=“clr–namespace:BoxEntry;assembly=BoxEntry“

This is how you do it,

<?xml version=“1.0“ encoding=“UTF–8“?>
<ContentPage xmlns=“http://xamarin.com/schemas/2014/forms“ xmlns:local=“clr–namespace:BoxEntry;assembly=BoxEntry“ xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml“ x:Class=“BoxEntry.HomePage“>
    <ContentPage.Content>
        <local:BoxBorderEntry Placeholder=“Your name here...“ WidthRequest=“200“ HorizontalOptions=“Center“ VerticalOptions=“Center“/>
    </ContentPage.Content>
</ContentPage>

Finally compile and run on iOS / Android.

Android:

iOS:

Happy coding… 🙂

Source code available in https://github.com/hiranpeiris/Xamarin-Custom-ENTRY