microsoft / microsoft/microsoft-ui-xaml

Border being cuted in differents DPIs (125%, 175%) only Windows 10 and UWP

Open
#10,216 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug team-Core team-Rendering
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.

Image

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.

Image

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
  1. Using Windows 10
  2. Set High Contrast in your machine
  3. Go to WinUI 2 Gallery
  4. Open Buton example
  5. Scroll to Wrapping Buttons wih Large Content
  6. Verify the component uses two borders
  7. Resize the window making smaller
  8. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.