Description

MAUI Grid inside Scrollview don't respect Margin and don't Center properly

MAUI app is not respecting the Margins when using WidthRequest that is larger than screen (iOS and Android). When rotating the app also doesn't Center properly on Android (iOS works).

The layout is simplified here, but on Xamarin Forms it works even with more complex layouts with StackLayout and VisualStates that change the layout when rotating the device.

I'm focusing on Android for this issue to keep it simple, but I also checked on iOS. On iOS the margins are also not respected but centering works after rotating the device.

If this is the way MAUI is supposed to work and it's not a bug can you tell me of a way to achieve the layout that I had in Xamarin Forms?

This is blocking our App migration.

Sample Layout used:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppGridCenteredWidthBounds.MainPage">

    <ScrollView HorizontalOptions="Fill" VerticalOptions="Fill" Orientation="Vertical" BackgroundColor="Aquamarine">
        <Grid HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="3*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Grid Grid.Row="1" RowDefinitions="Auto, Auto" Margin="20">

                <Grid Grid.Row="0" RowDefinitions="Auto, Auto" Margin="30" 
                      HeightRequest="125" WidthRequest="450"
                      VerticalOptions="Center" HorizontalOptions="Center"
                      BackgroundColor="Yellow" />

                <Grid Grid.Row="1" Margin="30" RowDefinitions="Auto, Auto"
                      WidthRequest="450" HeightRequest="400" 
                      HorizontalOptions="Center" VerticalOptions="Center" 
                      BackgroundColor="Green"/>
            </Grid>
        </Grid>
    </ScrollView>

</ContentPage>

Screenshots / Video

Xamarin Forms	MAUI

Steps to Reproduce

Use sample MAUI app with layout shown here or run the reproduction project

Link to public reproduction project repository

https://github.com/dinisvieira/maui-centered-grid-width-bounds/tree/main

Version with bug

8.0.20 SR4

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

Android 13/14, iOS 15/17 (and possibly others)

Did you find any workaround?

I couldn't find any workaround that allow me to do the layout I want. (I need to app to work on both small and large screen and both portrait/landscape) I could use code-behind to check the current Width of screen and adjust based on that but that is not ideal at all and I'm finding several issues when updating XAML layouts from Codebehind on runtime also.

Relevant log output

No response

dotnet / maui

Grids inside Scrollview don't respect Margin and don't Center properly #21957