Path renders blurry when scaling is >100%

[ghost]

Create a simple Path like this:
<Path Data="M 0 0 H 10 V 10 H 0 V 0" StrokeThickness="1" Stroke="Black" Stretch="Fill" Width="10" Height="10" />

It will render blurry when display scaling is larger than 100%.

Some pictures with the UWP caption buttons vs them recreated in XAML:
100%

150%

UseLayoutRounding doesn't fix this, and it seems it's enabled by default.

[StephenLPeters]

@GabrielN17 Did you find this issue in Winui3 or System xaml?

[StephenLPeters]

@gegao18 FYI

[ghost]

It behaves the same with system xaml, WinUI 2.x and WinUI 3 uwp. With WinUI 3 desktop, it's blurry even with 100% scaling.

[mdtauk]

If the stroke thickness is 1epx, and you scale to 150%, that would be 1.5epx, so of course would show some blurring?

I know there was another issue regarding TextBox borders showing blurring at 100% scale, so WinUI 3.0 rendering may have an issue.

But were you expecting the stroke to remain at 1epx with scaling turned on? Is there an API to prevent scaling of elements?

[ghost]

The scaling makes sense, but there doesn't seem to be a way to make sure the lines are sharp.

UseLayoutRounding works for position and dimensions. There could be a similar property for paths and borders.

[mdtauk]

Kinda hard to have a 1.5px line not be blurry.

Now maybe there should be a Xaml feature to allow for stroke values which are not scaled. So it will remain 1px thick even at 150% - 200% - 400% scaling etc.

You can opt out of scaling I think with Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true); but it may be Xbox only.

[ghost]

The new titlebar buttons in WinUI3 Preview 4 have the same issue, as they probably also use Path.

[jess-rod]

As noted, the following will render blurried (not sharp) :

<Path Data="M 0 0 H 10 V 10 H 0 V 0" StrokeThickness="1" Stroke="Black" Stretch="Fill" Width="10" Height="10" />

An obvious reason is that strokes are badly handled. Luckily, there's an easy workaround.

Avoid using strokes (Stroke and StrokeThicness) to stay safe. Mimic the look you desire by drawing a "doubled" path and using Fill instead of Stroke. An example will illustrate my words:

<Path StrokeThickness="0"
           Fill="Black"
           Data="M 0 0 h 15 v 15 h -15 z M 1 1 h 13 v 13 h -13 z"
           UseLayoutRounding="True"
           Stretch="Fill"
           Width="10"
           Height="10" />

In lieu of drawing a path with a square, then applying a stroke, draw two squares (one within the other), and fill the content with the desired "stroke" color. It will look like a stroked square although it's something else under the hook.

Having said that, this workaround is far from perfect. It's a shame this is not addressed automatically.

[adamplonka]

I thought this is a known issue because I have it on my pc and laptop (both on latest windows 11, scale 100%, WinUI3) but apparently it's supposed to work? The "Restore" icon looks awful

(images scaled up 4x without blur)

[ranjeshj]

Generically scaling up a path at partial pixel percentages is going to incur anti-aliasing. There is no easy solution to this problem and this is not in plan to be addressed at this time.