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
Top comments (10)
Oh, wow! This made my day. Thank you!
Muy buena explicación. Soy nuevo en MAUI
Una duda, como se registra FormHandler.RemoveBorders(); en MauiProgram
Gracias de antemano
Hola amigo,
Se registra dentro del metodo:
public static MauiApp CreateMauiApp()antes dereturn builder.Build();Saludos
Maravilha de dica, eu amei <3
Hi, by using this handler text is not visble please help how to make visible
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 :)
I resolved my issue , i was not setting height and width to a both frame and entry that's error was occuring.
great, thanks for sharing it!
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.
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.