Nested Border objects do not layout their Bounds correctly based on expected settings (iOS/Android/Windows)

[jonmdev]

Description

If you nest two Border objects so one contains the other, the bounds are not set appropriately to match the requested sizes based on padding. 1 erroneous pixel is added in every direction by the nesting (in all of Windows/iOS/Android).

In the demo code below, in all operating systems (iOS/Windows/Android), where an outer Border is set to 10 pixels padding, the bounds of the outer Border (height or width) minus the inner Border will result in 22 pixels (an extra two pixels - should be 20 pixels, ie. 2x padding).

This is preventing correct anticipation of sizes of objects for manual layouts.

Steps to Reproduce

1. Create a blank MAUI project in Visual Studio 2022 with .NET 7.0 by File > New named "Border Bounds Bug"

2. Copy and paste the following code into App.xaml.cs to replace the entire file:

using Microsoft.Maui.Controls.Shapes;
using System.Diagnostics;

namespace Border_Bounds_Bug {
    public partial class App : Application {
        public App() {
            InitializeComponent();

            MainPage = new ContentPage();
            VerticalStackLayout vert = new();
            (MainPage as ContentPage).Content = vert;

            Border border = new();
            border.StyleId = "OUTER BORDER";
            border.BackgroundColor = Colors.DarkBlue;
            border.Padding = new Thickness(10);
            border.Margin = 0;
            border.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(30), StrokeThickness = 0 };
            vert.Children.Add(border);

            Border innerBorder = new();
            innerBorder.StyleId = "INNER BORDER";
            innerBorder.HeightRequest = 60;
            innerBorder.BackgroundColor = Colors.White;
            //innerBorder.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(20), StrokeThickness = 0 };
            innerBorder.Padding = 0;
            innerBorder.Margin = 0;
            border.Content = innerBorder;

            //==================================
            //CLICK TEST BEHAVIOR
            //==================================
            TapGestureRecognizer gesture = new();
            border.GestureRecognizers.Add(gesture);
            gesture.Tapped += delegate {
                Debug.WriteLine("BORDER WIDTH " + border.Bounds.Width + " INNER BORDER WIDTH " + innerBorder.Bounds.Width + " | DIFFERENCE " + (border.Bounds.Width - innerBorder.Bounds.Width)); 
                Debug.WriteLine("BORDER HEIGHT " + border.Bounds.Height + " INNER BORDER HEIGHT " + innerBorder.Bounds.Height + " | DIFFERENCE " + (border.Bounds.Height - innerBorder.Bounds.Height));
            };
        }
    }
}

3. Click on Border on screen to Debug the bounds, which should be a 20 pixel difference from the outer border minus the inner border (due to padding 10 on outer Border) but instead returns a 22 pixel difference on all platforms (iOS/Android/Windows).

Link to public reproduction project repository

See above

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

iOS 16.7, Android, Windows 10

Did you find any workaround?

None.

Relevant log output

No response

[ghost]

Hi @jonmdev. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[jsuarezruiz]

.NET 8 Behavior with the latest changes

cc @jstedfast

[jstedfast]

I think @jsuarezruiz 's screenshot might actually be expected behaviour. Or maybe my brain is fried, not sure.

The outer Border has a StrokeThickness=0 which means that all it's really doing is painting the background color (dark blue) and clipping it in a RoundRectangle shape (which it is doing) and producing a padding of 20px for the inner border (looks about right).

The inner border is, again, using StrokeThickness=0 with a white background (correct) this time and a normal Rectangle clip shape (correct).

@jonmdev can you confirm?

[jonmdev]

@jstedfast, if you are referring to the border issue, which was posted here: #17761

Then yes, the correct behavior as illustrated in that thread is as @sjuarezruiz posted here. With that default code over there the corners should not be truncated.

However, in Windows/iOS .NET 7/8 the top left corner of the nested border gets bizarrely chopped off.

That is issue 1. Issue 2 is that the layouts are not precisely correct, as posted in this thread, but this is more minor.

[jonmdev]

I posted the code here which demonstrates both issues. @jstedfast If you play the project in Windows and iOS you will see the top left corner is truncated. If you click the object you will also see the bounds are wrong:

https://github.com/jonmdev/Border-Corner-Bug

[jonmdev]

This issue regarding the bounds miscalculation specifically can be closed. I figured out the issue. It was just that:

border.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(20), StrokeThickness = 0 };

Does not work. You cannot set the stroke thickness this way and must set it as border.StrokeThickness = 0;

So the difference was due to the default 1-2 px stroke. One less issue. :)

[jstedfast]

I have noticed, while working on Border, that there was another StrokeThickness on the Shape and thought that was confusing.

I guess it was done that way because you can probably draw a shape w/o the need for a Border.

Good that you figured out how to do what you wanted to do, though.