[Windows] <Border> on Windows is blurry

[MartyIX]

Description

Add <Border> your MAUI application (e.g. MartyIX/MauiBorderBlurred202403@ccdb380), then the application should look like this:

Now, if one zoomes in to see the button, it looks like this:

And there the border is composed of three (or four) parallel lines:

1. 1px line with color #404040
2. 1px line with color #000000
3. 1px line with color #404040
4. 1px line with color #DFDFDF

My expectation would be

1. 1px line with color #000000
2. 1px line with color #000000
3. 1px line with color #000000

So that the border is sharp.

My best guess is that this is a WinUI issue:

• Bug: Rendering regression in WinUI 3 with Paths microsoft/microsoft-ui-xaml#9338

Possibly relevant links:

• The colors in MAUI application are wrong #19356
• Border color is wrong #18455
• Path renders blurry when scaling is >100% microsoft/microsoft-ui-xaml#4116

Steps to Reproduce

1. Start the MAUI app (https://github.com/MartyIX/MauiBorderBlurred202403) on Windows
2. Zoom in
3. Check <Border> pixels

Link to public reproduction project repository

https://github.com/MartyIX/MauiBorderBlurred202403

Version with bug

8.0.7 SR2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11

Did you find any workaround?

No.

Relevant log output

No response

[kevinxufei]

Verified this issue with Visual Studio 17.10.0 Preview 2. Can repro on windows platform with sample project, when set Scale = 100%, multiple color boxes do not appear, but the colors are incorrect.

[MitchBomcanhao]

yeah it doesn't render property even at 100% scaling, the scaling seems like a red herring here.
I've tried asking winui to UseLayoutRounding but that still has not had any effect.

this bug might explain why I'm seeing blurry controls in places - those controls might be using a border internally (not my code)...

[MartyIX]

Is there any idea what causes the bug? Or how to fix it? Or is there a workaround?

[MitchBomcanhao]

is anyone looking into this? the scaling qualifier makes this bug appear to be an outlier - there is no link to scaling, I get this issue with border controls at 100% scaling. this is not an edge case scenario, it is just broken.

left: border
Right: frame
same color, same thickness

[MartyIX]

(Some issues I reported turned out to be issues with the WinUI 3 itself. So I guess it's important to test if this is a MAUI issue or WinUI 3 issue. One can create a simple WinUI 3 application and test if the border is broken there as well. I think I can do this in the evening to gather more info.)

Other than that I would love this issue to be fixed as well :)

[MartyIX]

WinUI 3 test

The app is here: https://github.com/MartyIX/LineHeight202404/tree/demo/202405/border (MartyIX/LineHeight202404@eaa4255)

BorderThickness=4

<Border BorderBrush="White" BorderThickness="4" Height="108" Width="64">
    <TextBlock Text="Test"/>
</Border>

Result:

Magnified (1256%):

BorderThickness=1

<Border BorderBrush="White" BorderThickness="1" Height="108" Width="64">
    <TextBlock Text="Test"/>
</Border>

Result:

Magnified (1800%):

-> So it looks like it's a MAUI bug.

[MartyIX]

Ok, the story unfolds:

1. MAUI does NOT use <Border> but it draws borders using path shapes (see).
2. There is a WinUI issue (Path renders blurry when scaling is >100% microsoft/microsoft-ui-xaml#4116) for paths that they are not sharp when scaling is involved.
   • I checked in my sample WinUI app:

     <?xml version="1.0" encoding="utf-8"?>
     <Window
         x:Class="LineHeight202404.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:LineHeight202404"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d">
     
         <StackPanel Orientation="Vertical">
             <Border BorderBrush="White" BorderThickness="1" Height="108" Width="64">
                 <TextBlock Text="Test"/>
             </Border>
     
             <Path Stroke="Red" StrokeThickness="1" Data="M 100,200 C 100,25 400,350 400,175 H 280"/>
         </StackPanel>
     </Window>

     and the result is:
     
     but one can see that the shape is not sharp as well:
     

So I guess the question is why MAUI draws the border using WinUI's <Path>s instead of using WinUI's <Border> directly.

[kenlyon]

I see a problem with my border. It's meant to be a 1px black stroke but it renders three pixels wide:

• #BFBFBF
• #7F7F7F
• #BFBFBF

If I set the stroke size to something like 10px, it looks black. There seems to be some scaling and anti-aliasing going on. (My scaling is set at 100%)

[Lukiluc29]

This is still a very disturbing issue for users! Even when setting Windows to 100%, it still happens over and over again. It would be great to look into this problem in order to find a solution to fix it.

[MitchBomcanhao]

@MartyIX please edit the issue to make this not about scaling - it isn't due to scaling, and Microsoft clearly will not care about scaling issues but might care about issues that affect everyone.

[christoroth]

Found this issue as I'm experiencing the same thing. I have a border around a grid and the top row is a header with a background colour. Border is same colour as the header background but the join between is not seamless because it looks like the border is aliasing to the the background behind the header (which as I'm debugging is a bright primary colour) and none of the 3 pixels of my 1 pixel border is the colour I asked for.

This creates unnecessary visual noise.

Frame provides 2 pixel solid border but in another case there is a recent comment saying it will be deprecated very soon, and the thickness of the border is not controllable in Frame down to 1px.

I run at 150% scaling but tested at 100%. It is NOT to do with desktop scaling. I have also tried a 0.5px border width.

As a work around, because I want my borders square and not rounded, I have succeeded. My root element was a border and first child a grid. I removed the border and applied a 0.5 margin to the content of the grid, and after all other content (so that they draw on top), added 4 boxviews, one for each side. height/Width request 0,5 accordingly and height/width options to fill (so top border is

<BoxView HorizontalOptions="Fill" VerticalOptions="Start" HeightRequest="0.5" BackgroundColor=". my colour binding .." />

And so on for the other 3 sides (with column/rowspans as necessary). Crisp 1 pixel border and no noise..

[MartyIX]

@MartyIX please edit the issue to make this not about scaling - it isn't due to scaling, and Microsoft clearly will not care about scaling issues but might care about issues that affect everyone.

I changed it.

I think you guys should upvote microsoft/microsoft-ui-xaml#9338. It does not look like this can be fixed on the MAUI's side. Or any other WinUI issue that is relevant here.