DEV Community

Cover image for Remove Entry and Picker borders in .NET MAUI
Victor Hugo Garcia
Victor Hugo Garcia

Posted on • Edited on

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
        });
    }
}

Enter fullscreen mode Exit fullscreen mode

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 (11)

Collapse
 
evgenyshevchuk profile image
Eugene Shevchuk

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

Collapse
 
aldincedeno profile image
aldincedeno

Muy buena explicación. Soy nuevo en MAUI

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

Gracias de antemano

Collapse
 
vhugogarcia profile image
Victor Hugo Garcia

Hola amigo,

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

Saludos

Collapse
 
rodrigo_ferreira_f018455f profile image
Rodrigo Ferreira

Maravilha de dica, eu amei <3

Collapse
 
asifhussainos profile image
AsifHussain-os

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

Collapse
 
vhugogarcia profile image
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 :)

Collapse
 
asifhussainos profile image
AsifHussain-os

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

Thread Thread
 
vhugogarcia profile image
Victor Hugo Garcia

great, thanks for sharing it!

Collapse
 
nakullukan profile image
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.

Collapse
 
vhugogarcia profile image
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.