WinUI3 Button XAML Template does not respect Foreground property after mouse passes over

[RossCoeH]

Describe the bug

In WInUI 3, create a Button with:

<Button Name="Undo1" Content="Undo." Background ="DarkSlateBlue" Foreground ="White"/>
On starting the app, the colors are correct, but after moving the mouse over the button, the text color will remain black rather that white as specified with Foreground property.

Steps to reproduce the bug

as above.

Note that the key issue is that the default template for Button (inside generic.xaml) does not have a templatebinding for Foreground, but includes Background.
My reference for the template is:
C:\Users.....nuget\packages\microsoft.windowsappsdk\1.0.3\lib\net5.0-windows10.0.18362.0\Microsoft.WinUI\Themes

The template contains:

      <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />

It should contain:

      <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
      <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />

Expected behavior

Foreground color property should be reset to original color after the mouse has left the button zone. It will do that if the generic template is updated as suggested

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.0.3

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 10 (21H2): Build 19044

Additional context

No response

[EddieLotter]

This might be related to the button theming issue currently experienced in the WinUI 3 Gallery app. (See winui3gallery://item/SystemBackdrops)
When you click the "Change Backdrop" button until the Current Backdrop is "None", the "Change Backdrop" button is incorrectly themed:

[ojhad]

@RossCoeH I am unable to repro this in Windows App SDK 1.1. Can you try it out and see if it's still an issue?

[RossCoeH]

Definitely still a problem in Windows App SDK 1.1. and in SDK 1.0.3
You are probably not watching the text color - Create a new WinUI 3 App and edit MainWIndow.xaml to add FontWeight, Foreground and Background colors into the Button as below:

`Window
x:Class="DemoBugButtonForeground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DemoBugButtonForeground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click"
            FontWeight="Bold"
            Foreground="White"
            Background="DarkSlateBlue"
            >Click Me</Button>
</StackPanel>

`

1. Start the app and the button text is white and bold.
   

2. Now move mouse over button - the text goes black on a white background (as expected due to Visual State triggers in Generic.xaml)

3. Now move the mouse away from the button and the text remains black and is not reset to the original white.
   

This is the error causes by a missing template binding for Foreground in generic.xaml as stated earlier.

You can view a demonstration application at https://github.com/RossCoeH/DemoBugButtonForeground.
It is currently built with Windows App SDK 1.0.3 but an upgrade to Windows App SDK 1.1. will not fix the problem either

[RossCoeH]

Unlikely to be a theming issue because the default Dark theme color will be white which is the same color as I have chosen - therefore after mouseover you would still be left with white, and you might conclude there is no error.

But if you change the test to use another foreground color like "orange" as below then you should see the error in both light and dark modes - use a button like:
<Button x:Name="myButton" Click="myButton_Click" FontWeight="Bold" Foreground="Orange" Background="DarkSlateBlue" >Click Me</Button>
The button text will start orange, but not return to orange after the mouse has passed over.

[ojhad]

My mistake, I can repro the bug. Thanks for the follow up! I've routed the issue.

[nickrandolph]

Did the routing cause this issue to get lost?

[michael-hawker]

Related to #6945

[ranjeshj]

In this particular case, there is a template bind to the foreground property for the control. The foreground property is inherited by the ContentPresenter in the template. The PointerOver visual state is writing the foreground property and when going back to normal, the inhertited property is not going back to its original value. A workaround would be to explicitly set the foreground property on the ContentPresenter to a template binding instead of it getting inherited. That unfortunately needs a re-template. Testing a fix to WinUI3's button template.

@michael-hawker There are other cases where the properties really need to be template bound instead of pointing to theme resources like you mention in your linked bug.

[Jimbo99]

Hi! Any progress on this please? And sorry but I am confused as to the workaround suggested - could you please clarify what the simplest way to solve this is at the moment, thank you.

[nickrandolph]

@Jimbo99 does this post not provide enough guidance on how to fix this issue in your app: https://nicksnettravels.builttoroam.com/fixing-broken-defaultbuttonstyle/

[nickrandolph]

@krschau @michael-hawker any idea whether this is going to be fixed in the 1.2 release (it wasn't in the preview releases).

[Jimbo99]

@Jimbo99 does this post not provide enough guidance on how to fix this issue in your app: https://nicksnettravels.builttoroam.com/fixing-broken-defaultbuttonstyle/

Many thanks Nick! I will give that a try.

[michael-hawker]

FYI @gabbybilka

[gabbybilka]

@krschau @michael-hawker any idea whether this is going to be fixed in the 1.2 release (it wasn't in the preview releases).

@ranjeshj @kmahone @llongley who were the latest to work on this and can provide a status update.

[nickrandolph]

So, looks like v1.2 without this bug being fixed? seriously??? How bad does a bug need to be in order to get it fixed?

[gabbybilka]

🎉Microsoft.WindowsAppSDK.1.2.221209.1 has been released which fixes this issue.

Handy links:

• Release Notes
• Official Nuget Release

[Steffens-Bridgemate]

I am sorry to report that I still have the problem with release 1.2.230313.1

[OmarGGil]

After a few days looking for a workaround i found that i was overriding the DefaultButtonStyle and i just needed to use BasedOn="DefaultButtonStyle" at all my button styles, so that there's no property missing anymore.

Changed this:
<Style TargetType="Button" x:Key="btnCoppelSecondary" > <Setter Property="Background" Value="White"/> <Setter Property="Foreground" Value="{StaticResource Highlight}"/> <Setter Property="BorderBrush" Value="{StaticResource Highlight}"/> <Setter Property="Margin" Value="10,0,10,0"/> <Setter Property="CornerRadius" Value="16"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="MinWidth" Value="200"/> </Style>

For this:
<Style TargetType="Button" x:Key="btnCoppelSecondary" BasedOn="{StaticResource DefaultButtonStyle}"> <Setter Property="Background" Value="White"/> <Setter Property="Foreground" Value="{StaticResource Highlight}"/> <Setter Property="BorderBrush" Value="{StaticResource Highlight}"/> <Setter Property="Margin" Value="10,0,10,0"/> <Setter Property="CornerRadius" Value="16"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="SemiBold"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="MinWidth" Value="200"/> </Style>

[Jimbo99]

After a few days looking for a workaround i found that i was overriding the DefaultButtonStyle and i just needed to use BasedOn="DefaultButtonStyle" at all my button styles, so that there's no property missing anymore.

Thank you very much for posting that, @OmarGGil! I am using 1.2.230313.1 and was still having the problem. Your mod fixed it for me.