Image Entry in Xamarin Forms

Sometimes we have a design in which one we need an entry with an icon inside, in this article I will show you how to achieve that in Xamarin Forms by using a custom renderer per platform.

Let’s code

1- Create the control 

As you can see here, I created five main properties:

  • Image: Property to set the source of the image
  • ImageAligment: This is an Enum, and you can set if you want the image on the left or right (By default is Left).
  • ImageWight: To set the weight of the image. (By default is 40).
  • ImageHeight: To set the height of the image. (By default is 40).
  • LineColor: To set the color of the entry line. (By default is White).

2-Create the renderers

iOS:  

Android:

3-Use the control

That’s all for now, you can see the full source code used here:

https://github.com/CrossGeeks/Xamarin.Forms.UI/blob/master/UISampleApp/Views/Logins/LoginDaniaPage.xaml

Happy coding!

You may also like

8 Comments

  1. Thanks for the tutorial! I’m not able to get the images to show on iOS though. I’m not really sure why either, any ideas?

          1. I have them set as BundleResource :/ I went through and I can’t find the issues still. It just shoes as an Entry with a background and different text color, no image or underline.

          2. mmm, did you add [assembly: ExportRenderer(typeof(ImageEntry), typeof(ImageEntryRenderer))] to your renderer ?