search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.01k stars 1.72k forks source link

[Windows] Shell Flyout overlaps Title bar #22672

Open AlexVDV116 opened 3 months ago

AlexVDV116 commented 3 months ago

Description

Bug Report: Shell Flyout Layout Issue When Setting Theme Programmatically

Issue Summary: When using the Shell Flyout in a .NET MAUI app and programmatically setting the theme color, the layout rendering of the Flyout becomes corrupted, causing it to overlap the title bar. This issue does not occur when changing the theme using Windows Settings.

Expected Behavior: The Shell Flyout should render correctly without overlapping the title bar, regardless of whether the theme is set programmatically or via Windows Settings.

Actual Behavior: When the app theme is set programmatically using the SetTheme() method, the Flyout overlaps the title bar, disrupting the layout.

Reproduction Repository: ShellFlyoutWindowsBug

Environment: .NET MAUI version: 8.0.40 Windows version: 10.0.19041.0

Observations: The Flyout overlaps the title bar when the theme is set programmatically. Commenting out the SetTheme() method results in normal behavior, allowing the theme to be changed via Windows settings without layout issues. Attempted delaying the theme setting in the OnStart() method but the issue persists.

Additional Notes: This issue seems to be specific to the Flyout layout rendering when the theme is set programmatically at the application startup. Any insights or fixes to address this layout rendering issue would be greatly appreciated.

Thank you for looking into this matter.

Steps to Reproduce

  1. Clone the repro repository: ShellFlyoutWindowsBug.

  2. Open the solution in Visual Studio.

  3. Run the application.

  4. Observe the Flyout behavior when the app starts.

  5. Change theme using the Windows settings.

  6. Observe the correct Flyout behaviour, no overlapping.

  7. Uncomment the SetTheme() method call in the App.xaml.cs.

  8. Run the application again.

  9. Change theme using the Windows Settings.

  10. Observe the Flyout overlapping the title bar.

Link to public reproduction project repository

https://github.com/AlexVDV116/ShellFlyoutWindowsBug

Version with bug

8.0.40 SR5

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

net8.0-windows10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

No theme setting, no overlapping. ShellFlyOutWindowsBug1 ShellFlyOutWindowsBug2

Theme set, Flyout overlaps. ShellFlyOutWindowsBug3

github-actions[bot] commented 3 months ago

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 and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Closed similar issues:

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

AlexVDV116 commented 3 months ago

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

This is the same issue however it is not resolved in the latest version.

ninachen03 commented 3 months ago

Verified this issue with Visual Studio 17.11.0 Preview 1.0 ( 8.0.40 & 8.0.21& 8.0.3 ). Can repro it when personalization -->colors set to dark on the PC side, and the theme color of VS is also set to Dark.