CODEWITHSUNDEEP
maui
OXO
OXO

Reputation: 1098

Change Color of Entry Underline or Remove this Color

In my .NET MAUI Entry, I wanted to change the Color of the Underline in an Entry in Code-Behind.

Is there a way to do this?

enter image description here

======= Edited with implementation of Answer below ======

Hint: I tried the answer below with an own BorderlessEntryControl which was derived from an Entry Control. There, at least the Placehodler-TextColor got lost. Maybe more Properties

Before

enter image description here

After

enter image description here

Upvotes: 9

Views: 16555

Answers (4)

Asam
Asam

Reputation: 109

Using Maui .Net 8, go to Platforms -> Android -> MainApplication.cs inside MainApplication method add this

using Android.App;
using Android.Content.Res;
using Android.Runtime;

namespace CarListApp.Maui;
[Application]
public class MainApplication : MauiApplication
{
    public MainApplication(IntPtr handle, JniHandleOwnership ownership)
        : base(handle, ownership)
    {
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(Entry), (handler, view) =>
        {
            if (view is Entry)
            {
                // Remove underline
                handler.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Transparent);

                // Change placeholder text color
                handler.PlatformView.SetHintTextColor(ColorStateList.ValueOf(Android.Graphics.Color.Red));
            }
        });
    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}

In your xaml file

<VerticalStackLayout 
    Spacing="25"
    Padding="20,10"
    VerticalOptions="Center">

    <Frame Padding="0" Margin="-5,0,0,0" Grid.Column="1" HasShadow="True" 
           HorizontalOptions="FillAndExpand" MinimumWidthRequest="290">
           
        <Entry x:Name="Username" Placeholder="Enter Username" Margin="10,0" />
    </Frame>
</VerticalStackLayout>

Result

Result

To change underline color:

Go to Platforms -> Android -> Resources -> values -> In colors.xml change colorAccent to the color you want.

Upvotes: 10

Taras Lisniak
Taras Lisniak

Reputation: 218

in Platform for Android, needs to add the handler, looks like this:

 protected override MauiApp CreateMauiApp()
 {
     // Remove Entry control underline
     Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("NoUnderline", (h, v) =>
     {
         h.PlatformView.BackgroundTintList =
             Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
     });

     return MauiProgram.CreateMauiApp();
 }

Upvotes: 9

Suchith
Suchith

Reputation: 1527

For MAUI .Net 8.0

handler.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Android.Graphics.Color.Transparent);

Upvotes: 13

Liyun Zhang - MSFT
Liyun Zhang - MSFT

Reputation: 14469

For remove the underline on the android, you can add the following code into the MauiProgram.cs:

Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(Entry), (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
#endif
        });

And on the windows platform, you can put the following code into the /Platforms/Windows/App.xaml:

<maui:MauiWinUIApplication.Resources>
        <Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
        <Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
 </maui:MauiWinUIApplication.Resources>

And there is no underline on the ios.

update 1：

Before:

enter image description here

After:

enter image description here

Upvotes: 9

Related Questions