Unable to Remove Focus Underline Color in Microsoft.UI.Xaml.Controls.TextBox

[Phenek]

Describe the bug

The Microsoft.UI.Xaml.Controls.TextBox control does not allow for the removal of the underline focus color, even when setting the FocusVisualPrimaryThickness and FocusVisualSecondaryThickness properties to zero. This behavior is observed in .NET MAUI applications targeting WinUI.

Steps to reproduce the bug

1. Create a .NET MAUI application targeting WinUI.
2. Add a TextBox control to the UI.
3. create an appropriate handler to access the native TextBox
4. Attempt to remove the underline focus color by setting the FocusVisualPrimaryThickness and FocusVisualSecondaryThickness properties to zero.

    public partial class BlankEntryHandler : EntryHandler
    {
        protected override TextBox CreatePlatformView()
        {
            var platformView = base.CreatePlatformView();

            platformView.Background = new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);

            platformView.BorderBrush = new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);
            platformView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);

            platformView.FocusVisualMargin = new Microsoft.UI.Xaml.Thickness(0);
            platformView.Margin = new Microsoft.UI.Xaml.Thickness(-2, -2, -2, 0);

            platformView.FocusVisualPrimaryBrush = new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);
            platformView.FocusVisualPrimaryThickness = new Microsoft.UI.Xaml.Thickness(0);

            platformView.FocusVisualSecondaryBrush = new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);
            platformView.FocusVisualSecondaryThickness = new Microsoft.UI.Xaml.Thickness(0);

            platformView.SelectionHighlightColor = new Microsoft.UI.Xaml.Media.SolidColorBrush(Microsoft.UI.Colors.Transparent);

            return platformView;
        }
    }

Expected behavior

The underline focus color should be removed from the TextBox control when setting the FocusVisualPrimaryThickness and FocusVisualSecondaryThickness properties to zero.

Screenshots

I need to make disappear this underline, because I am using another border implementation.

NuGet package version

WinUI 3 - Windows App SDK 1.5.1: 1.5.240311000

Windows version

No response

Additional context

I am trying to use TextBox with .Net MAUI

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• TextBox MaxLength doesn't work on Win10 w/ "." character (#9483), similarity score: 0.72

Closed similar issues:

• The Textbox cursor color is transparent (#8207), similarity score: 0.72
• [Checkbox] Focus size is incorrect for no-label checkboxes (#9035), similarity score: 0.71
• TextBox in a Flyout does not take focus (#8614), similarity score: 0.70
• Textbox content is not visible properly when we focused the textbox. (WinUI_Desktop) (#6323), similarity score: 0.70

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[baaaaif]

may this will help you https://learn.microsoft.com/en-us/answers/questions/893844/how-to-remove-underline-when-entry-receives-focus

[roxk]

The textbox control's look is controlled via light-weight styling, and textbox' styles are defined here. You'd want to disable these or as the above post indicated, set the thickness to 0 (but then you'd have to create an outer border).

[Phenek]

Hello Guys!

First thanks for your time.

@baaaaif, I ended with your suggestions with first this solution: TextControlBorderThemeThickness TextControlBorderThemeThicknessFocused It works!

Then @roxk give me a information about backgrounds styles: TextControlBackgroundPointerOver TextControlBackgroundFocused TextControlBorderBrushPointerOver TextControlBorderBrushFocused To make sure there is no pixel colored.

It is a workaround

For me is kind of a workaround cause we are not able to manipulate BorderBrush alone, we need to fight with default style in resources and find hardcoded names...

My complete workaround in MAUI handler is:

    protected override TextBox CreatePlatformView()
    {
        var platformView = base.CreatePlatformView();
        platformView.Padding = new Thickness(0);

        var rd = MauiWinUIApplication.Current.Resources;
        platformView.BorderBrush = new SolidColorBrush(Colors.Transparent);
        rd["TextControlBorderBrushPointerOver"] = new SolidColorBrush(Colors.Transparent);
        rd["TextControlBorderBrushFocused"] = new SolidColorBrush(Colors.Transparent);

        platformView.Background = new SolidColorBrush(Colors.Transparent);
        rd["TextControlBackgroundPointerOver"] = new SolidColorBrush(Colors.Transparent);
        rd["TextControlBackgroundFocused"] = new SolidColorBrush(Colors.Transparent);

        platformView.BorderThickness = new Thickness(0);
        rd["TextControlBorderThemeThickness"] = new Thickness(0);
        rd["TextControlBorderThemeThicknessFocused"] = new Thickness(0);

        return platformView;
    }

Expected Behavior

Maybe default style should have their proper name "default", so we could at least remove them easly by doing

{
textBox.style = null
}

[roxk]

we need to fight with default style in resources and find hardcoded names

This is a feature and not "hard coded" name, just like you won't say css's :hover selector is a hard coded name. The default fluent controls in WinUI provide everything, from base color to hover/pressed/selected colors, so there is no single "set border brush" setters.

(Bonus chatter: if you use any of the fancier views in ios/android, they all have similar features which provide per-state color configuration, and thus, "problems". So no it's not a WinUI issue)

Maybe default style should have their proper name "default", so we could at least remove them

You can actually do that:

<Style x:Key="EmptyStyle" x:TargetType="TextBlock"></Style>
<TextBlock Style={StaticResource EmptyStyle}/>

This removes the fluent look. I'm not sure what would happen when the style doesn't have a control template but for TextBlock it should work.

[ranjeshj]

@Phenek The lightweight style is the way to go here. There are currently no plans to change the names of any resources in WinUI3 since that could break existing apps.