+94766046492

©2018 by Hiran Peiris. Proudly created with Wix.com

Search
  • Hiran Peiris

How to write a custom TextField / Entry in Xamarin Forms

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.


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.


1. Lets create an Entry with a BoxBorder…



2. Create a HomePage and set it as the main page


3. Create following classes,

  • Create BoxBorderEntry class in BoxEntry project

  • Create BoxBorderEntryRenderer class in BoxEntry.Droid project

  • Create BoxBorderEntryRenderer class in BoxEntry.iOS project




































BoxBorderEntry.cs

BoxBorderEntryRenderer.cs   –  In iOS

BoxBorderEntryRenderer.cs  – In Droid


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



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,


5. Finally compile and run on Android / iOS.









Happy coding…

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


9 views