wpfui
wpfui copied to clipboard
lepoco
Part of title bar is still rendered when it should not
Describe the bug
I recently started using the library, and whilst working on Windows 10 machine everything looked as expected. When I moved my work to Windows 11, I noticed some part of the title bar is rendered, even when shouldn't. Attaching examples of that reproduced for the WPF UI Gallery. I have not yet found any workarounds to remove it in my app too.
To Reproduce
Start WPF UI Gallery or demo app.
Expected behavior
No additional elements in the title bar.
Screenshots
Windows 10:
Windows 11:
OS version
Edition Windows 11 Home Version 22H2 Installed on 22/10/13 OS build 22621.1555 Experience Windows Feature Experience Pack 1000.22640.1000.0
.NET version
7.0
WPF-UI NuGet version
2.0.3
Additional context
No response
I have found the Windows setting which causes this.
Personalization > Colors
It is reproduced only when it's on.
Strangely, after enabling this option the title bar has not changed. But for example google chrome has changed.
Interesting. I even asked my friend to try and he got the same results. Maybe there's more to it then.
It only seems to occur when the window is focused. Anyone has a workaround yet?
The Problem
This is caused by the user's Accent color being applied to the Window's titlebar.
Solutions
The quick workaround is to not have Show accent color on title bars and windows borders checked in the Windows Settings under Personalization > Colors.
If you don't want to change the setting via the Settings app, you can either do this directly in the Registry using regedit or via Powershell.
Using regedit:
Open regedit and navigate to HKCU:\Software\Microsoft\Windows\DWM for an item named ColorPrevalence. If you don't see this then right-click and create a new DWORD with that name. Set the value to 0 in order to disable it or 1 to enable it.
Using powershell:
# check current ColorPrevalence setting
Get-ItemPropertyValue -Path 'HKCU:\Software\Microsoft\Windows\DWM' -Name 'ColorPrevalence'
# disable ColorPrevalence (Accent colors on window titlebars and borders)
Set-ItemProperty -Path 'HKCU:\Software\Microsoft\Windows\DWM\' -Name 'ColorPrevalence' -Type DWord -Value 0
Other Methods
Aside from regedit and powershell you can create a .reg file, use the reg command in cmd, set via Group Policy, etc.
(Actually) Solving the Problem
Other than turning that Personalization setting off, there's likely a native Win32 API call that can be used to disable the title bar coloring with DWM. If I have some extra free time I'll see if I can put something together but for now here's a link to the documentation from Microsoft.
Isn't it possible to set a window style that removes the titlebar, for a quick and dirty work-around?
Workaround:
Put this into the MainWindow constructor:
public MainWindow()
{
InitializeComponent();
new WindowInteropHelper(this).EnsureHandle();
SystemThemeWatcher.Watch(this, WindowBackdropType.Auto);
}
The idea is that the window handle should be created before SystemThemeWatcher.Watch(...) runs.
This is because underneath there is a call to WindowBackdrop.RemoveBackdrop(...) and that fails if the window handle is not created.
In general I think that the whole idea of "lazy" window initialization is flawed.
The actual issue is that ui:titlebar is taller then the area that get's colored by the accent color and the title is set to be at the center of the ui:titlebar
if you give the ui:titlebar a height of 30 this issue goes away
<ui:TitleBar Height="30" ... />
Before adding an height of 30
After adding an height of 30
The real issue with titlebar is that the icons on the system buttons stay black on dark mode until you hover the mouse on them
At start
after hovering over the minimize button
After hovering over all system buttons
for this issue I haven't yet figured out a solution
if you give the
ui:titlebara height of 30 this issue goes away
Should be 32, but #details :)
Actually at least on my PC the height of the accent colored bar is 30px exactly
How did you get 32px @Jay-o-Way?
How did you get 32px @Jay-o-Way?
Well, I mean, according to the design... https://learn.microsoft.com/windows/apps/design/basics/titlebar-design#standard-design
Well, I mean, according to the design...
Interesting - an old wpf app without wpf-ui actually has 31px of accented colored titlebar while in my wpf-ui test app it's only 30px
Perhaps that 32px includes a border?
But you're right - after further testing although the accented area is only 30px high, only by making ui:titlebar 31px high does it cover the full accented area - and if i need an extra pixel that indicates theres actually a different colored border - so 32px is the correct height to use
The fix for this issue is to use DwmSetWindowAttribute to set the DWMWA_CAPTION_COLOR attribute to 0xFFFFFFFE - this causes the title bar colour to not show when the mica effect is enabled with DWMWA_SYSTEMBACKDROP_TYPE (I'm assuming this is what wpfui uses to enable the mica effect.). However, this behaviour is undocumented here. I'm assuming this is what Notepad does as it has a mica effect in the title bar but doesn't have this issue.
