[regression/8.0.0-preview.4.8333] Windows application frame is now black

[hilmican-yuksel]

Description

Windows Application Frame color is black on net8.0-windows10.0.19041.0

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.0-preview.4.8333

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.0-preview.3.8149

Affected platforms

Windows

Affected platform versions

windows10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

Hi @hilmican-yuksel. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[jeremy-visionaid]

I also observe this upgrading to 8.0.0-preview.7.8842

[ghost]

Hi @hilmican-yuksel. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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.

[jeremy-visionaid]

Here's a repo - just a new .NET MAUI App template switched to dotnet 8:

https://github.com/molesmoke/MauiTestApp/tree/dotnet8

[jeremy-visionaid]

@PureWeen Looks like this was caused by #14517

[PureWeen]

@jeremy-visionaid hmm is it a particular version of windows or OS level styling you have set?

I created a new template and using light theme everything look white to me.

NET7 does style with a slightly different grey

But I'm not seeing black.

Your sample

[jeremy-visionaid]

@PureWeen Ah yup, looks like it's not default Windows behaviour, looks like both @hilmican-yuksel and I are running with:
"Show accent colour on title bars and window borders" in "Settings -> Personalisation -> Colours"

Also looks like you're running the main branch - the repro for this issue is on the dotnet8 branch (I have a branch per MAUI bug).

Overall, it's obviously not a major one, but I write apps for visually impaired users, so style/consistency and usability for high contrast/custom DPI/scaling, accessibility etc. is particuarly important to that group. Ideally I'd like to be able to follow the underlying WinUI themes closely (though that also has its own problems).

With the lack of consistency between Microsoft's UI frameworks, I'm not sure what the "correct" behaviour should be here. But I'd guess it should at least be all one way or all the other, and preferably configurable via styles/themes.

[Foda]

@jeremy-visionaid: In the dotnet8 branch we set a custom titlebar by default -- but don't override the caption buttons so they default to the behavior of using the Windows theme settings. We should probably just make the default behavior for the caption buttons to have a transparent background w/ the correct text foreground resource.

However, for now, you can work around this by setting the caption button colors manually. This might be better anyways since you're designing for visually impaired users and gives you more consistent control.

To do this for an app with a Light theme you can add the following code to your MauiProgram.CreateBuilder logic:

#if WINDOWS
builder.ConfigureLifecycleEvents(events =>
{
    events.AddWindows(windows =>
        windows.OnWindowCreated(window =>
        {
            window.AppWindow.TitleBar.ButtonBackgroundColor = Microsoft.UI.Colors.Transparent;
            window.AppWindow.TitleBar.ButtonForegroundColor = Microsoft.UI.Colors.Black;
        }));
});
#endif

[jeremy-visionaid]

@Foda Thanks for the workaround. I need something that works adaptively to system settings and theme changes, but I'm sure I can come up with something from there. 👍

[samhouts]

Confirmed that this regressed between 8.0.0-preview.3.8149...8.0.0-preview.4.8333. #14517 is most sus (thanks @jeremy-visionaid!). I would think that the buttons and the bar would all be the same color, so it does look a bit weird. Also, my accent colors are now red and yellow from testing this. #hotdogstandforever

[pledi]

Before I was able to change the TitleBar Color with changing the window's ExtendsContentIntoTitleBar Property to true and setting the color of the WindowCaptionBackground Resource, now that doesnt work anymore.

Anyone already got a workaround for changing the Titlebar Color dynamically?

Edit: ah I see, we moved to AppWindow and https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=wasdk tells me that

// Set active window colors
// Note: No effect when app is running on Windows 10 since color customization is not
// supported.

I'm stuck with a black bar on Window 10.

[pledi]

I think this is still not fixed in RC2. @Foda
If I start my application with the OS Theme set to Dark, I do have a black window border.
If I start it with Light Mode, it's white.

I do need to provide a theme switch option in my application, and therefore I need to toggle between both light and dark mode at runtime. On Xamarin I did this by setting ExtendsContentIntoTitleBar to true, and overriding WindowCaptionBackground. On RC2 on Windows 10 this results in the following:

So for me the Window application frame is still black (or white if I switch the OS Theme). That little box on the right it by way the Color set for WindowCaptionBackground, on .Net 7 this filled the whole frame.

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!

[jeremy-visionaid]

@Foda I concur with @pledi, the issue remains in RC2 and this issue should be reopened.

However, my expectations of the correct behaviour is different. For other WinUI 3 apps, the user accent does not apply to the caption buttons - and this should probably be the default behaviour for MAUI. At least it should be all one way or all another, not the current half and half of the current situation.

I can get reasonable behavior through lifecycle events (but you also need to set inactive colours and respond to theme changes), so thanks for the hints for the workaround.

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!

[jeremy-visionaid]

@Foda @pledi Looks good in 8.0.0-rc.2.9511