AppTheme behaving incorrectly in flyout menu

[davidvalle1]

Description

Hello,

a couple of days of trying to solve this has lead me to believe this requires a bugfix.

The problem arise when changing the theme inside of the Maui-app. The problem is not general to every component of the app, but specifically to the flyout menu. The background of a button will not be changed to the correct AppThemeBinding color when the theme is changed locally in the app, but the color of the button will keep the same theme-color as Windows (Light/Dark) was set to when the app was booted.

Another issue is the flyout menu stretching into the titlebar area when changing the background color of flyout menu. At app boot, the flyout menu background color is either white or black depending on Windows theme, and not the color set using "FlyoutBackgroundColor". Changing the background color live to a different color does change the color of the flyout menu, but also extends the flyout menu to the titlebar area.

I have created a repo to help you understand the problem better, feel free to test it yourself. This is very strange, especially when hover-effect using Visualstate works fine with Apptheme bindings for the buttons in question.

Steps to Reproduce

Background color of a button in flyout menu;
Darkmode: Orange
Lightmode: Green

Change the apptheme (Windows set to Darkmode).

• Background color of button in flyout menu is orange at start up
• Change the app-theme to light (currently is dark/unspecified)

Expected result:

• Background color of button in flyout menu turns green

Actual result:

• Background color of button in flyout menu remains orange

Change Windows theme to light (Apptheme is now light)

Expected result:

• Background color of button in flyout menu turns green

Actual result:

• Background color of button in flyout menu remains orange

Link to public reproduction project repository

https://github.com/davidvalle1/AppThemeBug

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 3.0(8.0.0-rc.2.9373). This issue repro on Windows 11(7.0.92), not repro on Windows 11(8.0.0-rc.2.9373), Android 13.0-API33 and iOS 16.4 with below Project:

AppThemeBug.zip

[ghost]

Hi @davidvalle1. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.