Remove Entry and Picker borders in .NET MAUI

If you are developing a .NET MAUI app that uses form elements such as entries and pickers, you might want to apply a custom design for those fields. However, by default Android & iOS make the form fields display the form elements UI following their platform design guidelines. In this post, I will show you how to remove those borders for Android & iOS using a simple custom handler and some native code. Let’s get started!

Update: This article has been updated to support .NET MAUI 8+.

---

Create a static class FormHandler

using Microsoft.Maui;
using System.Drawing;

#if IOS
using UIKit;
using Foundation;
#endif

#if ANDROID
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
#endif

namespace DemoApp.Handlers;

public static class FormHandler
{
    public static void RemoveBorders()
    {
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("Borderless", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.Background = null;
            handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
            handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
#elif IOS
            handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
            handler.PlatformView.Layer.BorderWidth = 0;
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
        });

        Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("Borderless", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.Background = null;
            handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
            handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
#elif IOS
            handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
            handler.PlatformView.Layer.BorderWidth = 0;
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
        });
    }
}

On the code shared above, in addition to remove the borders, I set the background color of the form elements to transparent on both platforms, so you get the freedom to style them as needed.

Register the handler

On the MauiProgram.cs file register the handler
FormHandler.RemoveBorders();

Conclusion

In .NET MAUI it is really cool how easy you can implement a static method that allows to execute code based on each platform. Of course if you prefer to avoid the declarative conditionals you can always use the .ios.cs and .android.cs file class naming convention.

Thanks for reading! Follow me on Twitter @ivictorhugo

Comments

[aldincedeno]

Muy buena explicación. Soy nuevo en MAUI

Una duda, como se registra FormHandler.RemoveBorders(); en MauiProgram

Gracias de antemano

[Victor Hugo Garcia]

Hola amigo,

Se registra dentro del metodo: public static MauiApp CreateMauiApp() antes de return builder.Build();

Saludos

[Eugene Shevchuk]

Oh, wow! This made my day. Thank you!

[AsifHussain-os]

Hi, by using this handler text is not visble please help how to make visible

[Victor Hugo Garcia]

I did not face that issue. Maybe you are setting the wrong TextColor to the ? if you believe you are correct, I recommend you to open a ticket on the MAUI repository with a sample project :)

[AsifHussain-os]

I resolved my issue , i was not setting height and width to a both frame and entry that's error was occuring.

[Victor Hugo Garcia]

great, thanks for sharing it!

[Nakul]

I want to remove border for Entry in windows platform. I can do this using handlers as shown this article. But I am wondering why the border shows again when the entry element is focused.

[Victor Hugo Garcia]

Hello @Nakul, I am sorry, I don't have much experience with the Windows platform for MAUI. Maybe you can ask by creating a discussion topic on the .NET MAUI depository, so others with experience on Windows can provide some insights.