Border does not occupy all the space in a grid cell

[JohnHDev]

trafficstars

Description

We are migrating XF to Maui, converting Frame to Border. However Border does not occupy the same space as a frame.

Steps to Reproduce

New maui project, replace MainPage content with the below code, and run You will see the 2 border controls have extra margins to height (border on the right), and width (border below). To compensate we can set margin to a negative value, but that value would be different per platform.

        var grid = new Grid()
        {
            RowSpacing = 1,
            ColumnSpacing = 1,
            BackgroundColor = Colors.LightGray
        };

        grid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));
        grid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));
        grid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));
        grid.ColumnDefinitions.Add(new ColumnDefinition(GridLength.Star));

        grid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
        grid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
        grid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
        grid.RowDefinitions.Add(new RowDefinition(GridLength.Star));

        Content = grid;

        var frame = new Frame()
        {
            BorderColor = Colors.Red,
            BackgroundColor = Colors.White,
            VerticalOptions = LayoutOptions.Fill,
            HorizontalOptions = LayoutOptions.Fill,
            CornerRadius = 0,
            Content = new Label { Text = "Frame" }
        };

        Grid.SetRow(frame, 1);
        Grid.SetColumn(frame, 1);

        grid.Children.Add(frame);

        var border1 = new Border
        {
            StrokeShape = new Rectangle(),
            Stroke = Colors.Red,
            BackgroundColor = Colors.White,
            VerticalOptions = LayoutOptions.Fill,
            HorizontalOptions = LayoutOptions.Fill,
            Content = new Label { Text = "Border" }
        };

        Grid.SetRow(border1, 1);
        Grid.SetColumn(border1, 2);

        grid.Children.Add(border1);

        var border2 = new Border
        {
            StrokeShape = new Rectangle(),
            Stroke = Colors.Red,
            BackgroundColor = Colors.White,
            VerticalOptions = LayoutOptions.Fill,
            HorizontalOptions = LayoutOptions.Fill,
            Content = new Label { Text = "Border" }
        };

        Grid.SetRow(border2, 2);
        Grid.SetColumn(border2, 1);

        grid.Children.Add(border2);

Version with bug

6.0.408 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 15

Did you find any workaround?

Set margin to a negative value

Relevant log output

No response

[JohnHDev]

Can someone pick this up for triage pls.

[zslocum]

I have experienced this. Android 29 and 31 APIs

[JohnHDev]

Will someone on the Maui team attempt to replicate the issue please? We spend the time to report bugs and provide examples, you should as a minimum try to replicate in a timely manner. This was reported 2 weeks ago.

[JohnHDev]

@jfversluis @PureWeen sorry for the pings chaps, but it seems some tickets have been missed from triage and replication. Can you poke this in someone's direction pls?

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[jfversluis]

Thanks for the ping @JohnHDev!

[JohnHDev]

@jsuarezruiz when might this get picked up? It is disheartening to see so many layout issues not being resolved in a timely manner.

[JohnHDev]

@jfversluis when do you think basic layout issues like this will be resolved? We can't migrate when even core functionality like this is broken and doesn't get fixed. What is it your team are prioritising over basic, bread and butter usage?

[hartez]

@JohnHDev This is what I get when I run your code on the latest stable version:

[ghost]

Hi @JohnHDev. 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.

[JohnHDev]

Thanks @hartez for taking a look, Ive just tried with VSforMac 17.5 Preview (17.5 build 437). Zoom in, I can see that the bottom border starts on a greater X pixel than the frame, the right border starts on a higher Y pixel than the frame, and the right border ends on a lower Y pixel than the frame. I believe your screenshot shows the same. When I looked previously the offsets were different per platform too, so might be worse on droid and windows.

It has been a while since I looked at Maui (coz, you know what Im going to say...), I presume the latest VSforMac Preview is running the latest Maui? I tried it with a new project and seeing the above.

[JohnHDev]

@hartez its even worse on Android, please try that too.

[JohnHDev]

@hartez have you had a chance to take another look?

[hartez]

@hartez have you had a chance to take another look?

No.

[JohnHDev]

@hartez have you had a chance to take another look?

No.

Thank you for the detailed response. ;) What would you recommend instead? We would continue with Frame, but that no longer supports tap gestures (separate issue raised for that, verified, still not fixed). We cannot move to Maui when simple layouts just don't work correctly.

[hartez]

There's a PR open with a fix for your tap gesture issue, so hopefully that will get merged soon.

As for this one, I can't say for sure when it will be addressed; it's on the list, and we'll get to it when we can. I know it's not ideal, but in the meantime you can work around this on Windows by adding a Margin of -0.5.

[JohnHDev]

@hartez thanks, I'll wait for the PR to be merged and then revert to Frame until this is addressed.

[hartez]

Bot needs to chill.

[JohnHDev]

@hartez I decided to go with Border and with implicit styles working I can now set the default margins per platform on app start. So we are now making good progress with our .NET MAUI prototype migration, we have CICD running, iOS deployment to TestFlight (Android due when others are back from holiday), and making good progress. So far, .NET MAUI iOS release builds appear to run much quicker than Xamarin.Forms. Other than a few word wrap issues (pre-existing XF issue that Maui has inherited), inability to run UI tests on iOS (existing ticket to rebuild Xamarin.TestCloud for .NET 7), its looking pretty good!

[hartez]

Re-labeling this, it's not a Grid issue. It's an issue with the ShapeView. As the size of the shape's Stroke increases, the content is rendered further and further inward.

For example, try this layout:

<Grid RowDefinitions="*,*,*">

    <Border Border.StrokeShape="Rectangle" Border.Stroke="Red" Border.StrokeThickness="1" Grid.Row="0">
        <Label Text="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="Orange"/>
    </Border>

    <Border Border.StrokeShape="Rectangle" Border.Stroke="Red" Border.StrokeThickness="10" Grid.Row="1">
        <Label Text="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="Orange"/>
    </Border>

    <Border Border.StrokeShape="Rectangle" Border.Stroke="Red" Border.StrokeThickness="25" Grid.Row="2">
        <Label Text="3" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="Orange"/>
    </Border>

</Grid>

and you'll see an increasing gap between the content and the Rectangle. Leaving this here as a note to whoever ends up working on it.