Skip to content

Fix close button misalignment in WindowChrome #698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 7, 2025

Conversation

cdock1029
Copy link
Contributor

@cdock1029 cdock1029 commented Apr 4, 2025

Fixes #677 partially, though I don't see issue with button size in relation to other Fluent apps. On my 4k laptop the caption buttons look the same as Windows Explorer, for example.

For the gap next to the right of the caption buttons, it seems to be default behavior out of the box when setting a WindowChrome.

NonClientFrameEdges = NonClientFrameEdges.Right was the minimal way to fix it.

https://learn.microsoft.com/en-us/dotnet/api/system.windows.shell.nonclientframeedges?view=windowsdesktop-9.0

Setting any other single value didn't fix. Setting Top alone or with other values didn't work. And you can only set 3 at a time out of the 4. So I set Right, Bottom, and Left. I'm not sure exactly the implication but I will cite what I got from Copilot as justification why I thought might as well let OS manage as many edges as we can:

When you use WPF’s WindowChrome to customize your window, the property NonClientFrameEdges lets you decide which parts of the window’s border—the “chrome” that normally handles things like resizing, hit testing, and standard visual effects—are left in the hands of the operating system rather than being completely overwritten by your custom client code.

In a typical Windows window, there are two “areas”: the client area (where your app’s content lives) and the non-client area (which the OS owns and which handles window frame rendering, borders, caption buttons, and resizing behavior). With WindowChrome, you can extend your WPF visuals into that non-client region for a completely custom look. However, completely taking over every edge (i.e. having the client “own” all sides) means you must reimplement or work around standard behaviors like window resizing and even subtle effects (such as Aero Peek, hover animations, or the proper hit testing at the edges). By designating one or more edges with NonClientFrameEdges (choosing from values like Left, Right, Top, or Bottom), you’re telling the framework, “I want the OS’s window manager to keep handling that edge.” In other words, that edge will be rendered and function with the OS’s built‑in behavior.

On a side note, some have used setting NonClientFrameEdges to solve flickering problems that arise from using a WindowChrome. I didn't see any flickering by default with the Gallery or a new project that uses .NET 9 Fluent styles, so maybe you're already handling that but could be useful to prevent those.

dotnet/wpf#1176 (comment)

https://stackoverflow.com/questions/51669632/wpf-windowchrome-causing-flickering-on-resize/54904747#54904747

In DevExpress ThemedWindow (just as an example) they exist, because DevExpress uses a custom WindowChrome instead of the native object:

https://supportcenter.devexpress.com/ticket/details/t1201744/themedwindow-resize-behavior-when-resizing-from-the-left-border

Some complain when setting this it causes erroneous white borders or spacing but I didn't observe any.

Microsoft Reviewers: Open in CodeFlow

@cdock1029
Copy link
Contributor Author

@microsoft-github-policy-service agree

Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

@dipeshmsft
Copy link
Member

Thanks a lot @cdock1029 for your contribution. It's a good find.

@dipeshmsft dipeshmsft merged commit d38f0fc into microsoft:main Apr 7, 2025
8 checks passed
@dipeshmsft dipeshmsft added this to the WPF Gallery v1.1.1 milestone Apr 7, 2025
@Case-Closed-X
Copy link

Case-Closed-X commented Apr 8, 2025

Fixes #677 partially, though I don't see issue with button size in relation to other Fluent apps. On my 4k laptop the caption buttons look the same as Windows Explorer, for example.

@dipeshmsft @cdock1029 Perhaps the caption buttons appear smaller because I'm using a 55-inch monitor (Set display scaling to 300% which results in 288 DPI)? I have no other 4K monitors available for testing. On my 55-inch 4K monitor (300% scaling -> 288 DPI), the caption buttons look exactly like in the screenshot.

300% scaling -> 288 DPI: WPF (Left) & WinUI (Right)
Image

Below are the test screenshots for 336 DPI (Small buttons) and 216 DPI (Normal buttons) configurations.

350% scaling -> 336 DPI: Windows Explorer (Left) & Microsoft Store (Right)
image

225% scaling -> 216 DPI: Windows Explorer (Left) & Microsoft Store (Right)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TitleBar buttons are scaled very small at a resolution of 4K (288 DPI)
3 participants