Microsoft-ui-xaml: RichEditBox should respect Background/Foreground color

[Gavin-Williams]

Proposal: RichEditBox should respect background color and foreground color

Summary

When I add a RichEditBox to a page and configure it's foreground and background colors, those colors are only respected when the app is unfocused. When the control is hovered or in-focus, there are different colors; background is black for hover, and white when it's in-focus.

This is not expected, and presents an unpleasant experience. What I expect is that the control respect background and foreground color in all states. Even if I set RequestedTheme to Dark, nothing changes.

Rationale

• Improved appearance and behavior.
• The current behavior is not acceptable; no edit box could be shipped with the default behavior.
• reduce the need for re-templating.

Notes

The Xaml Controls Gallery exhibits correct behavior for the control, but the same code in my own app behaves differently.

[Felix-Dev]

@Gavin-Williams

When I add a RichEditBox to a page and configure it's foreground and background colors, those colors are only respected when the app is unfocused. [...] This is not expected, and presents an unpleasant experience. What I expect is that the control respect background and foreground color in all states.

The behavior you are seeing is consistent with controls like TextBox, Button and many other controls throughout WinUI/UWP.

When the control is hovered or in-focus, there are different colors; background is black for hover, and white when it's in-focus.

It appears to me as if you are using an older WinUI version here. WIth WinUI Version 2.4, the hover/focused background color is the same (black in dark mode):

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
    <TextBox Foreground="Red" Background="Orange" Header="TextBox" MinWidth="150"/>
    <RichEditBox Foreground="Red" Background="Orange" Margin="15,0,0,0 " Header="RichEditBox" MinWidth="150"/>
</StackPanel>

If you are using WinUI 3 Preview versions, you should get this updated design in Preview 2 (which added parity with WinUI 2.4).

With the current styling system in place, customizing the appearance of a Control via its Foreground/Background properties often means you will also have to use lightweight styling to also change the control's appearance in its other visual states like hover/pressed/focused to get a coherent visual experience:

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
    <RichEditBox Margin="15,0,0,0 " Header="RichEditBox" MinWidth="150">
        <RichEditBox.Resources>
            <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="LightSkyBlue" />
            <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="DodgerBlue" />
        </RichEditBox.Resources>
    </RichEditBox>
</StackPanel>

[Gavin-Williams]

OK. I'm looking at the RichEditBox page. And I don't see any mention of these default resources. I notice as well that these are undiscoverable in the editor - those keys are magic strings. I can see now that you've told me about them that the Xaml Controls Gallery does make use of them (I think) in C#.

So that I can read more about these resources, where should I look, are these Xaml Theme Resources?

[Felix-Dev]

@Gavin-Williams Typically, I just look at the control template of the control I'm interested in located here in the WinUI repo (to get the most up-to-date theme resources available.) For the RichEditBox, for example, this would be this file. If you check the control template and its visual states, you will see which theme resources the default control template uses and thus the theme resources you should override.

Even if you are not using WinUI but the OS XAML controls instead, it pays off taking a look at the WinUI repo because for many OS XAML controls, their default control templates are already available here. You see that with the RichEditBox control. It's not yet open-sourced but WinUI 2 still already ships its default control template lifted out of the OS.

Of course, you can also always look at the generic.xml file which comes with the Windows SDK and contains all the styles and resources shipped with a particular SDK version. This file is typically located at [your specified root path to the Windows SDKs]\WindowKits\10\DesignTime\CommonConfiguration\Neutral\UAP\[SDK version]\Generic\, where [SDK version] is 10.0.18362.0 for the 1903 SDK, for example. Pressing Fn + F12 in VS on a selected resource defined in that file will also open that file in VS. For example, the default background of a UWP Page is set to ApplicationPageBackgroundThemeBrush. Just select that resource, press Fn + F12 and VS should open the generic.xaml file of the target OS version.

The WinUI repo has the advantage that it separates control templates by control - the generic.xaml file just lumps them all together into one huge file.

In select cases, the UWP documentation also lists available theme resources for a control. While there is no mention of available theme resources on the RichEditBox documentation page, you will find a list of available theme resources on the TextBox page with the remark that many of the resources listed there also apply to the RichEditBox control. That said, this is not the case for all controls and there is also no mention of available theme resources for new WinUI controls - like the TabView, NumberBox or the TeachingTip. As theme resources are part of the available API of a control this is something which should receive greater care in the future and I created a proposal with the aim of improving the documentation for (at least) new controls.

[StephenLPeters]

@Felix-Dev did an excellent job describing the situation. This behavior is by design. the lightweight style keys are what you should be using to customize your text box in the hover, pressed, and focused states.

[msft-github-bot]

We appreciate the feedback, however this doesn’t currently align to the project’s goals and roadmap and so will be automatically closed. Thank you for your contributions to WinUI!