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=UTF8?>
<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.

image

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…

screen-shot-2017-02-16-at-3-30-19-pm

Create a HomePage and set it as the main page

screen-shot-2017-02-16-at-3-39-54-pm

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

screen-shot-2017-02-16-at-4-03-37-pm

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

screen-shot-2017-02-16-at-4-11-30-pm

<?xml version=1.0 encoding=utf8?>
<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=clrnamespace:BoxEntry;assembly=BoxEntry

This is how you do it,

<?xml version=1.0 encoding=UTF8?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:local=clrnamespace: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:

screenshot_1487252203

iOS:

screen-shot-2017-02-16-at-7-17-44-pm

Happy coding… 🙂

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

 

 

 

2 thoughts on “How to write a custom TextField / Entry in Xamarin Forms

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s