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!

Advertisements

16 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

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