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:
#1894 (comment)

[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.)

[ghost]

I discovered in #5099 that borders get blurry when using a SolidColorBrush, but when using a LinearGradientBrush or AcrylicBrush they'll be sharp as expected.

[codendone]

There have been some fixes for this issue which will be in a future OS release. We're also bringing those fixes into WinUI 3.

[BreeceW]

There have been some fixes for this issue which will be in a future OS release. We're also bringing those fixes into WinUI 3.

It looks like great improvements have been made in the two Windows 11 preview releases (for system XAML/WUX)!

Here is what a WinUI TextBox from WinUI 2.6.1 with ControlsResourcesVersion="Version1" looks like on Windows 11 build 22000.65:

This is exactly what I wanted it to look like. This is such a good improvement. I had been using squared off controls in my app for this reason, but now I’m going to round them.

Here is a TextBox with ControlsResourcesVersion="Version2" in the same configuration:

While the stripe on the bottom looks a little off with the top pixels of the accent-colored line being darker, maybe this could be fixed with just a style update in WinUI 2.x. Otherwise, this looks decent. Based on the TextBox_themeresources.xaml, it doesn’t look like this effect is intentional, though, so maybe more work on the system-side is needed.

These are great improvements and I’m really happy about them. There is, I think, a little more room for improvement (like the TextBox stripe, and especially see CheckBoxes below), so I would not close this issue just yet.

Thanks so much for working on this problem. It’s just a massive improvement already.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[yaira2]

@BreeceW has this been fully resolved?