microsoft / microsoft/microsoft-ui-xaml
Border being cuted in differents DPIs (125%, 175%) only Windows 10 and UWP
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
Describe the bug
OS:
- Widows 10 (22H2)
UWP:
- Min version 17763
- Target version 19041
I am facing difficulties understanding why borders are being clipped within the presentation tool inherited from the WinUI 2 Gallery.
Currently, I am encountering issues with borders when running applications on Windows 10 using UWP.
I have an application where we use the native code from the WinUI 2 Gallery to demonstrate our components. On Windows 10, the borders are clipped even when there is sufficient space for them not to be.
At times, when resizing the screen, it becomes noticeable that the border is clipped. If we continue resizing, the border stops being clipped and then gets clipped again.
We also observed this behavior when implementing a border in a clean application. Although there is enough space, during some resizing moments, the border becomes thinner and does not maintain its intended size. However, it does not get clipped as it happens in the wrapper of the WinUI 2 Gallery.
We also noticed that the WinUI 2 Gallery itself uses a workaround to prevent this issue. It implements two borders, and at times, this second border becomes the main one, suppressing the problem.
Currently, this issue does not occur on Windows 11, only on Windows 10.
While researching, we found some issues related to DPI awareness. However, in theory, UWP should handle this automatically, unlike WinUI, which requires configuration to avoid staying at 96 DPI for all monitors.
https://learn.microsoft.com/en-us/windows/win32/hidpi/setting-the-default-dpi-awareness-for-a-process
https://github.com/microsoft/microsoft-ui-xaml/issues/1953
https://github.com/microsoft/microsoft-ui-xaml/pull/1894
https://stackoverflow.com/questions/59631395/button-border-clipped-in-wpf-with-125-dpi-setting
Steps to reproduce the bug
- Using Windows 10
- Set High Contrast in your machine
- Go to WinUI 2 Gallery
- Open Buton example
- Scroll to Wrapping Buttons wih Large Content
- Verify the component uses two borders
- Resize the window making smaller
- See the borders collapse and turn one in some resize sizes
Expected behavior
Don't be necessary to use two borders or use variable margin to compenss this behavior
Screenshots
No response
NuGet package version
None
Windows version
No response
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the WinUI 2 Gallery Button example, specifically Wrapping Buttons with Large Content, and reproduce the border behavior on Windows 10 with the listed DPI settings while resizing. Done means the borders retain their intended size without requiring two borders or variable margins, including in a clean UWP application.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100