Border stroke thickness isn't correct/offset on WinUI

Foda commented 1 year ago

Description

When setting the Border.StrokeThickness in WinUI to 1, the rendered border isn't actually 1px thick. The same happens when set to 3, 5, etc. It seems like the border is inset by half a pixel, so odd values cause it to display wrong :(

Steps to Reproduce

<Border
    WidthRequest="300"
    HeightRequest="300"
    StrokeThickness="1"
    Stroke="Red"
    Background="Blue">
        <Label
            Text="Welcome to .NET Multi-platform App UI"
            FontSize="18"
            HorizontalOptions="Center" />
</Border>

Link to public reproduction project repository

N/A

Version with bug

8.0.0-preview.6.8686

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

All

Did you find any workaround?

No

Relevant log output

No response

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

spadapet commented 1 year ago

@Foda, I built the main branch and the WinUI border thickness is wrong in a different way:

Thickness is half what it should be
Right and bottom are cut off
Contents of border are clipped (see top of robot image)

Make the thickness super large to see the right/bottom:

If I remove the margin, the border is way out of bounds:

Foda commented 1 year ago

Yeah, it’s…. totally messed up. I also wonder if it’d be better to use the WinUI border if we know the shape is a rect or rounded rect, but we should figure out what’s causing this first

From: Peter Spada @.> Sent: Wednesday, August 2, 2023 2:14:01 PM To: dotnet/maui @.> Cc: Mention @.>; Author @.> Subject: Re: [dotnet/maui] Border stroke thickness isn't correct/offset on WinUI (Issue #16507)

@Fodahttps://github.com/Foda, I built the main branch and the WinUI border thickness is wrong in a different way:

[image]https://user-images.githubusercontent.com/2523431/257942716-1fe770aa-bbb7-4a7e-abf7-e46b7471eb0f.png

Thickness is half what it should be
Right and bottom are cut off
Contents of border are clipped (see top of robot image) [image]https://user-images.githubusercontent.com/2523431/257942886-55d4287b-7741-47c0-90d1-4fb7890b0b67.png

Make the thickness super large to see the right/bottom:

[image]https://user-images.githubusercontent.com/2523431/257943021-a75a8f7f-7477-4ef1-a8d9-a11e2c86b882.png [image]https://user-images.githubusercontent.com/2523431/257943051-1ed63158-3592-47c7-b428-0a12a1e50cec.png

If I remove the margin, the border is way out of bounds:

[image]https://user-images.githubusercontent.com/2523431/257943210-ce9287c8-9cd4-42e7-9047-9d175727a811.png [image]https://user-images.githubusercontent.com/2523431/257943237-3be993c7-b2ea-4857-9e30-f60fde8bf38a.png

— Reply to this email directly, view it on GitHubhttps://github.com/dotnet/maui/issues/16507#issuecomment-1662972512 or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAGZPFEVJERCY4YTCG7T5ATXTK7JVBFKMF2HI4TJMJ2XIZLTS6BKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDUOJ2WLJDOMFWWLLTXMF2GG2C7MFRXI2LWNF2HTAVFOZQWY5LFUVUXG43VMWSG4YLNMWVXI2DSMVQWIX3UPFYGLAVFOZQWY5LFVIZDANBWG44DGMBSGWSG4YLNMWUWQYLTL5WGCYTFNSBKK5TBNR2WLKRSGA3TONRQHAZDKMVENZQW2ZNJNBQXGX3MMFRGK3ECUV3GC3DVMWVDGMZXGMYDSOJWGMZKI3TBNVS2S2DBONPWYYLCMVWIFJLWMFWHKZNKGM4DEMZVHAYTCMBVURXGC3LFVFUGC427NRQWEZLMVRZXKYTKMVRXIX3UPFYGLLCJONZXKZKDN5WW2ZLOOSTHI33QNFRXHFUCUR2HS4DFVJZGK4DPONUXI33SPGSXMYLMOVS2SMRWGIZTSNJSGI2IFJDUPFYGLJLJONZXKZNFOZQWY5LFVIYTQMZTGU4DCMRRGWBKI5DZOBS2K3DBMJSWZJLWMFWHKZNKGIYDINRXHAZTAMRVQKSHI6LQMWSWYYLCMVWKK5TBNR2WLKRSGA3TONRQHAZDKMUCUR2HS4DFUVWGCYTFNSSXMYLMOVS2UMZTG4ZTAOJZGYZTFAVEOR4XAZNFNRQWEZLMUV3GC3DVMWVDGOBSGM2TQMJRGA22O5DSNFTWOZLSUZRXEZLBORSQ. You are receiving this email because you were mentioned.

Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

cgp1976 commented 1 year ago

I am facing this issues as well on Visual Studio 2022 17.8 Preview 1 8.0.0-preview.7.8842. literally just the top and left border are rendered.

XamlTest commented 1 year ago

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Windows 11, Android 13.0-API33 and iOS 16.4 .NET 8 with below Project: 16507.zip

jstedfast commented 1 year ago

Thickness is half what it should be

ContentPanel.UpdateClipPath() seems to divide the strokeThickness by 2 when calling RoundRectangle.InnerPathForBounds() but none of the other platforms do.

afernandes commented 2 months ago

Border.Stroke and Border.StrokeThickness incorrect.

the border color is lighter than the defined color and the border thickness is too large even though it is set to 1. I have added a frame for comparison:

<Border
    Stroke="Black"
    StrokeThickness="1"
    StrokeShape="RoundRectangle 8"
    Background="White"
    Padding="16,8"
    HorizontalOptions="Center">
    <Label
        Text=".NET MAUI"
        TextColor="Black"
        FontSize="18"
        FontAttributes="Bold" />
</Border>

<Frame
    BorderColor="Black"
    CornerRadius="8"
    BackgroundColor="White"
    Padding="16,8"
    HorizontalOptions="Center">
    <Label
        Text=".NET MAUI"
        TextColor="Black"
        FontSize="18"
        FontAttributes="Bold" />
</Frame>