Microsoft-ui-xaml: Discussion: Improvements to border rendering

[BreeceW]

Discussion: Borders and lines in XAML occasionally blurred

Above is a screenshot of the XAML Controls Gallery app showing off the newly introduced rounded corner default styles on a TextBox. Given for comparison below is a similarly styled HTML input rendered in the new Chromium-based Edge. The Edge-rendered input has uniform color throughout the sides of the border, and only does any anti-aliasing on the corners itself. This looks crisp on monitors of all pixel densities. Contrast that with the XAML TextBox, where setting CornerRadius appears to activate some kind of anti-aliasing on the whole border, leaving the edges of the border to appear undesirably blurry and almost with an unintentional glowing effect. This was not the case when TextBox was squared. The issue here is not that the TextBox is rounded, but what that rounding does to the rendering of the TextBox.

Please note that the bottom text also has ClearType enabled, though that is an unrelated issue.

While this issue is significantly more important now that so many of the controls have rounded styles by default (which seems to activate this rendering issue), it’s worth pointing out that this issue is not unique to WinUI 2 nor to rounded corners.

Most notably, it has always affected CheckBox (above, the Settings app, below XAML Controls Gallery).
Here is another example with HyperlinkButton (from XAML Controls Gallery):

Curiously, the extra anti-aliasing line (that is, the thin, light stroke that appears around affected borders), is rendered below the underline in the first example, and above in the second. This again makes the controls look undesirable. Sometimes this blurriness appears to be linked to DPI scaling settings, but at least in the rounded corner TextBox example, it occurs even at 100% scaling. All screenshots here are at 125% scaling.

To me, it’s important that WinUI is able to render controls that look as good or better than web browsers. I’d like to hear other’s thoughts on how WinUI should be rendering across a variety of screens and how we can make sure that our applications look crisp and high quality and hopefully lead to improvements in the platform.

[robloo]

This discussion might be related:
https://github.com/microsoft/microsoft-ui-xaml/pull/1894#issuecomment-579859700

[ischmal]

I'd second that this is a vital quality-of-life feature. These nuances have frustrated me for years with UWP.

Regardless of the memory overhead, I honestly believe Chromium-driven UIs look better than anything native for Windows right now. Fonts look great and edges are perfectly crisp and smooth. (I mean, look no further than the terrific polish on VSCode.)