Xamarin.Forms Borderless Entry

Here’s a quick freebee. If you want to create an entry that has no border, it can be done with a pretty simple custom renderer.

Let’s first create a new control that inherits Entry:

BorderlessEntry.cs

 public partial class BorderlessEntry : Entry
    {
        public BorderlessEntry()
        {
            InitializeComponent();
        }
    }

We aren’t doing any special logic or anything here since all we need to do is remove the border.

Now let’s create our renderer on Android:

BorderlessEntryRenderer.cs


[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace YOUR_NAMESPACE
{
    public class BorderlessEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement == null)
            {
                Control.Background = null;
            }
        }
    }
}

Note that setting the background drawable to null will kill the border (including the bottom line in AppCompt).

Now let’s create our renderer on iOS:

BorderlessEntryRenderer.cs

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace YOUR_NAMESPACE
{
    public class BorderlessEntryRenderer : EntryRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            
            Control.Layer.BorderWidth = 0;
            Control.BorderStyle = UITextBorderStyle.None;
        }
    }
}

The main property here is the BorderStyle.

Lastly, UWP (this should also be the same thing for WP and Win8):

BorderlessEntryRenderer.cs

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace YOUR_NAMESPACE
{
    public class BorderlessEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.BorderThickness = new Thickness(0);
            }
        }
    }
}

That’s all there is to it!

24 thoughts on “Xamarin.Forms Borderless Entry”

    1. That’s true if you want it universally applied. Note that I use a custom view that inherits Entry. That way you can still use any other Entry with borders, or use the BorderlessEntry where you need it.

      Like

    1. Absolutely! The reason I blogged about achieving this with a custom renderer rather than an effect (which I would recommend using here) is because of a follow up I’m going to do that will extend on this particular control quite a bit!

      Like

      1. Hi Alex. Works great, however, I am having trouble extending this entry to allowed for TextChange and Completed events. Can you please advise?

        Like

  1. Hi, I have tried fallowing code in my xamarin android project but not luck. I have create ‘BorderlessEntry’ class in control folder and creating rederer for android in xamarin android project. While I am using these borderless entry as like control.BorderlessEntry.WidthRequest geetting xamal.parse exception. width request not found exception is getting. Can please point out what I am missing.

    Like

      1. You shouldn’t need to change the renderer at all. Rather, you should treat it just like the regular Xamarin.Forms Entry class. Use the Platform (or OnPlatform depending on your Xamarin.Forms version) API to set the WidthRequest for the different platforms.

        Like

    1. You can just remove the InitializeComponent() because the class doesn’t have an xaml file associated with it. This works wonderfully! Thank you!

      Like

  2. BTW the iOS renderer now has to be like this:
    Control.BorderStyle = UIKit.UITextBorderStyle.None;

    BorderThickness does not longer exist.

    Like

  3. i I would like to remove Entry field borders from iOS device and tried your code but nothing happen.
    Can you explain more ??

    Like

Leave a comment