Windows 11 misaligned title bar color

DevToys-app / DevToys

A Swiss Army knife for developers.

https://devtoys.app/

MIT License

26.94k stars 1.45k forks source link

Windows 11 misaligned title bar color #1228

Closed veler closed 3 months ago

veler commented 4 months ago

Current behavior

The color on title bar is misaligned. It should be invisible (non colorized):

How to reproduce it (as minimally and precisely as possible)

No response

Expected behavior

The colorized title bar should be smaller.

Screenshots

No response

Workaround

No response

Affected platforms

Windows

Affected DevToys kind

DevToys (app with GUI)

DevToys Version

2.0.1

Relevant Assets/Logs

No response

veler commented 4 months ago

I reproduce the same issue in WPF Gallery App interestingly.

0x5bfa commented 3 months ago

Fyi, DevHome seemed to had this issue.

https://raw.githubusercontent.com/microsoft/devhomegithubextension/main/build/store/canary/media/ja-JP/github-setup.png

Color also must be green.

WPF Gallery

WPF UI app

Snipping Tool

Paint (Looks correct)

Is this some sort of issue with WinUI?

niyari commented 3 months ago

WIP

veler commented 3 months ago

Devtoys window is in WPF, so my guess is that it's a wpf specific problem, as your screenshots point it.

@niyari , did you find anything yet? I'm really struggling with this one.

niyari commented 3 months ago

I found that this was caused by the background color of the WPF content and WebView being set to transparent by default.

Specifying a background color in the Grid or webview tags in MainWindow.xaml or in the HTML content (e.g. body) in DevToys hides the WPF title bar, giving it a more natural appearance.

The easiest fix is to make the .nav-bar-header color a constant using CSS.