Border cannot render to the requested size and instead renders a 1-2 px margin around itself each time (Windows/iOS/Android all affected)

[jonmdev]

Description

When a Border is given a height/width request to a given amount (like the screen height/width or the parent's height/width), we do not see this in reality.

In reality, an approximately one pixel padding is added around the Border on all platforms.

This is seen with the following project code, which can be copied and pasted into any new blank project to replace App.xaml.cs:

public partial class App : Application {

    public event Action screenSizeChanged = null;
    public double screenWidth = 0;
    public double screenHeight = 0;
    ContentPage mainPage;
    public App() {

        InitializeComponent();

        //=========
        //LAYOUT
        //=========
        mainPage = new();
        mainPage.Background = Colors.Magenta;
        MainPage = mainPage;
        mainPage.SizeChanged += delegate {
            invokeScreenSizeChangeEvent();
        };

        //VerticalStackLayout vert = new();
        AbsoluteLayout vert = new();
        mainPage.Content = vert;
        vert.BackgroundColor = Colors.Red;
        vert.HorizontalOptions = LayoutOptions.Center;
        vert.Margin = 0;
        vert.Padding = 0;

        
        Border border1 = new Border();
        border1.BackgroundColor = Colors.YellowGreen;
        border1.Margin = 0;
        vert.Children.Add(border1);
        border1.SizeChanged += delegate {
            Debug.WriteLine("BORDER WIDTH " + border1.Width + "BORDER HEIGHT " + border1.Height + " BOUNDS " + border1.Bounds);
        };

        //==================
        //RESIZE FUNCTION
        //==================
        screenSizeChanged += delegate {

            vert.HeightRequest = screenHeight;
            vert.WidthRequest = screenWidth;

            border1.HeightRequest = screenHeight;
            border1.WidthRequest = screenWidth; 

        };


    }
    private void invokeScreenSizeChangeEvent() {
        if (mainPage.Width > 0 && mainPage.Height > 0) {
            screenWidth = mainPage.Width;
            screenHeight = mainPage.Height;
            screenSizeChanged?.Invoke();
            Debug.WriteLine("main page size changed | width: " + screenWidth + " height: " + screenHeight);
        }
    }
}

In this case, the Border and AbsoluteLayout/VerticalStackLayout are set to be the exact same size and match the size of the ContentPage holding them. One should only see a YellowGreen screen with nothing else.

However, this does not happen on any platform.

Instead we get a red one pixel border around the project as the Border seems to force a 1 pixel margin around itself.

Windows:

Android:

iOS is the same.

This makes it hard to nest objects properly as the Layout elements unpredictably poke through around the edges of any sub elements inside them.

Any fix would be appreciated.

Steps to Reproduce

1. Create a new project File > New and copy paste the code above into App.xaml.cs
2. Play the project and see the red line around the edge that should not be visible.

Link to public reproduction project repository

https://github.com/jonmdev/Height-Width-Bug

Version with bug

7.0.92

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

No response

Did you find any workaround?

No workaround. Project debugs out:

main page size changed | width: 1265.3333740234375 height: 633.3333129882812
BORDER WIDTH 1265.3333740234375 BORDER HEIGHT 633.3333129882812 BOUNDS {X=0 Y=0 Width=1265.3333740234375 Height=633.3333129882812}

Indicating that the project believes everything is set correctly. But it is not rendering correctly.

Relevant log output

No response

[ghost]

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.

[jonmdev]

I have tested it further and it seems not to be the Layout but rather the Border that is the problem.

For example if you cut out the layout and instead change the code to:

        mainPage.Content = border1;

The same thing occurs except now you have the magenta background around the edge.

There just seems to be something defective about how Border is being drawn in all platforms that it cannot go to the edge.

If you change it also to a Boxview like:

BoxView box = new BoxView();
box.Color = Colors.YellowGreen;

and set it to match height/width of screen the same way, it will do so correctly and fill to the edge.

Therefore this is definitely a specifically Border issue.

If any of these elements are put in and set to match the ContentPage height/width they do so reliably:

• BoxView
• AbsoluteLayout
• VerticalStackLayout

but Border does not.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 2.0(8.0.0-rc.1.9171). Repro on Windows 11 with below Project:
Height Width Bug.zip

[jonmdev]

@jsuarezruiz I know you fixed this bug here:

#18071

#18134

By any chance, were you able to fix this at the same time with that fix? Or would you be able to look at it to see?

This one really makes it impossible to make consistent layouts with Borders same as that other bug. It would be very helpful to get them both fixed since Border is the main workhorse of drawing shapes on screen.

Thanks for your help.

[jonmdev]

This appears resolved now that I can tell in .NET 8. Thank you.