Hovering over the Button with mouse, the button’s foreground changes unexpectedly

Describe the bug Hovering over the Button with mouse, the button’s foreground changes unexpectedly

Steps to reproduce the bug

1. Create a button in XAML and with Foreground like “Gray”
2. Run and hover you mouse on it

Expected behavior Should not change the foreground color

Screenshots

Version Info

NuGet package version: [Microsoft.UI.Xaml 2.7.0-prerelease.210816001] [Microsoft.UI.Xaml 2.6.1] [Microsoft.UI.Xaml 2.6.2-prerelease.210811003]

Windows app type:

UWP	Win32
Yes

Windows version	Saw the problem?
Insider Build (xxxxx)
May 2021 Update (19043)	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context Example code:

<StackPanel>
            <Button Foreground="Gray" 
                    Width="100"
                    Content="Hello"/>
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
            <Button Foreground="Gray"
                    Width="100"
                    Content="Hello" />
</StackPanel>

[eugenegff]

@ranjeshj @MikeHillberg and @jevansaks any ideas what might have gone wrong?

I determined what caused such problem in Version2 styles comparing to Version1 styles. ButtonForeground and ButtonForegroundPointerOver were different in Version1 and became the same in Version2. Tweaking Version2 ButtonForegroundPointerOver to be different than ButtonForeground fixes the issue too.

Seems that VisualStateManager somehow decides that it has no work to do if brushes are the same even when Foreground propagation is involved and work needs to be done.

Having this in mind, I think that “to add Foreground=”{TemplateBinding Foreground}" to the button’s ContentPresenter" is a good workaround, that should be immediately applied to the MUX, as underlying issue is in OS code, and MUX should support old OS versions too. Fix for Button and ToggleButton is in PR #6105, DropDownButton is affected too.

@StephenLPeters @ranjeshj @jevansaks @tashatitova FYI

Button_themeresources_v1.xaml

            <StaticResource x:Key="ButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
            <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />

Button_themeresources.xaml

            <StaticResource x:Key="ButtonForeground" ResourceKey="TextFillColorPrimaryBrush" />
            <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush" />

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.