MAUI Grid column width bug on Android?

Question

I'm using Grid.ColumnDefinition but the percentage does not seems to work as it should on Android whereas it's working on Windows.

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Maui.Views.TestMapPage"
             Title="TestMap">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <BoxView Grid.Row="0" Grid.ColumnSpan="3" Color="Blue" />
        <BoxView Grid.Row="1" Grid.Column="0" Color="Purple" />
        <BoxView Grid.Row="1" Grid.Column="1" Color="Yellow" />
        <BoxView Grid.Row="1" Grid.Column="2" Color="Purple" />
        <BoxView Grid.Row="2" Grid.ColumnSpan="3" Color="Red" />
    </Grid>
</ContentPage>

And the result is not as expected (20%,60%,20%)

1. Why?
2. Any idea how to fix this?

Edit & answer to questions:

• I'm testing on Pixel 3a XL - API 33 (Android 13.0)
• Changing to MainPage = new Views.TestMapPage(); did not change the grid problem but remove the tabar and the tittle (which is normal)
• It does not work on Pixel 5 - API 33 (Android 13.0)
• To my surprise it works on windows machine
• I'm not going to support iOS given the difficulties and requirements needed to even test your app in local...

Answer 1

So I have found the issue, it appears that Grid.ColumnSpan is the source of the bug. If I try without it

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Maui.Views.TestMapPage"
             Title="TestMap">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <BoxView Grid.Row="0" Grid.Column="0" Color="Blue" />
        <BoxView Grid.Row="1" Grid.Column="0" Color="Purple" />
        <BoxView Grid.Row="1" Grid.Column="1" Color="Yellow" />
        <BoxView Grid.Row="1" Grid.Column="2" Color="Purple" />
        <BoxView Grid.Row="2" Grid.Column="0" Color="Red" />
    </Grid>  
</ContentPage>

I have the following result, and the grid is split as specified.

There are bugs around this area, even if on different target architecture and slightly different scenario...

• https://github.com/dotnet/maui/issues/15328
• https://github.com/dotnet/maui/issues/15018

I guess I'll have no choice to do find a workaround until they fix it...anyway I won't use BoxView in the final UI so it might just be fine after all...

Keep Coding :D

Edit: It works correctly with frame

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Maui.Views.TestMapPage"
             Title="TestMap">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Frame BorderColor="Gray"
               CornerRadius="10"
               Grid.Row="0"
               Grid.Column="0" 
               Grid.ColumnSpan="3"
               BackgroundColor="Blue">
            <Label Text="Frame wrapped around a Label" />
        </Frame>

        <!--<BoxView Grid.Row="0" Grid.Column="0" Color="Blue" />-->
        <BoxView Grid.Row="1" Grid.Column="0" Color="Purple" />
        <BoxView Grid.Row="1" Grid.Column="1" Color="Yellow" />
        <BoxView Grid.Row="1" Grid.Column="2" Color="Purple" />
        <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Color="Red" />
    </Grid>  
</ContentPage>