Part of title bar is still rendered when it should not

[yagudron]

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

[IvanDmitriev1]

Take a look at the development branch, does the problem persist?

[yagudron]

Yes, I have tried building from development - the same behavior.

[yagudron]

I have found the Windows setting which causes this.

Personalization > Colors

It is reproduced only when it's on.

[IvanDmitriev1]

Strangely, after enabling this option the title bar has not changed. But for example google chrome has changed.

[yagudron]

Interesting. I even asked my friend to try and he got the same results. Maybe there's more to it then.

[olabacker]

It only seems to occur when the window is focused. Anyone has a workaround yet?

[syntax-tm]

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.

• Desktop Window Manager (DWM) | Microsoft Docs

[chenxuuu]

still have this problem

[Jay-o-Way]

Isn't it possible to set a window style that removes the titlebar, for a quick and dirty work-around?

[drolevar]

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.

[537mfb]

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

[Jay-o-Way]

if you give the ui:titlebar a height of 30 this issue goes away

Should be 32, but #details :)

[537mfb]

Actually at least on my PC the height of the accent colored bar is 30px exactly

How did you get 32px @Jay-o-Way?

[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

[537mfb]

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

[aquinn39]

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.

[pomianowski]

Fixed? in #1122