.Net Maui - Grid in a Horizontal of Both ScrollView not formatting correctly - grid

Question

I would like to add a scrollable (vertically and horizontally) Grid in a row of an outer Grid. I want to set the Grid column widths based on the GridUnitType.Star.
I can achieve this when the SrollView orientation is set to Vertical but not when set to Horizontal or Both.
The following XAML demonstrates this:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiGrids.MainPage">
<Grid Margin="20" RowDefinitions="Auto,Auto,Auto">
<Grid Grid.Row="0" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Horizontal">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>
</ContentPage>
The column widths of the outer and vertical grid are correctly set based on the Star value but these values are ignored in the case of the horizontal grid.
Code output.
I was able to do this in Xamarin Forms but does not seem possible in Maui. Am I missing something.

Answer 1

Here's the code snippet below that works well on Android for the Maui, you can refer to it:
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" ColumnDefinitions="*,2*,3*" Grid.ColumnSpan="3">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="3">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical" Grid.ColumnSpan="3">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>

Answer 2

Think I am a good part the way there.
It appears unlike the vertical ScrollView the horizontal ScrollView needs to have a width or a child with a specific width.
I have named the outerGrid, the horizontalGrid and the verticalGrid in the XAML.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiGrids.MainPage">
<Grid Margin="20" RowDefinitions="Auto,Auto,Auto">
<Grid x:Name="outerGrid" Grid.Row="0" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Both" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
<Grid x:Name="horizontalGrid" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical" VerticalScrollBarVisibility="Default">
<Grid x:Name="verticalGrid" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>
and then set the grid widths in code behind based on the defaulted outerGrid width as follows:
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
outerGrid.Loaded += OuterGrid_Loaded;
this.SizeChanged += MainPage_SizeChanged;
}
private void MainPage_SizeChanged(object sender, EventArgs e)
{
horizontalGrid.WidthRequest = outerGrid.Width;
verticalGrid.WidthRequest = outerGrid.Width;
}
private void OuterGrid_Loaded(object sender, EventArgs e)
{
horizontalGrid.WidthRequest = outerGrid.Width;
verticalGrid.WidthRequest = outerGrid.Width;
}
This works in Windows when the form is displayed and resized. Also works in Android, both portrait and landscape.