How do I make a full screen grid in .net Maui?

Question

I am trying to make a page which has a top row (toolbar), main content in the middle, then a status bar along the bottom of the screen. If the main content is too large then I want it to scroll. Should be easy - right?

Below is the XAML I have been using but just can't seem to get it to work. More accurately - I can't get it to work on iOS. It works fine on Android but in iOS it just expands off the bottom of the screen so I can't see it.

Any suggestions?

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition />
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>

    <Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />

    <BoxView Grid.Row="1" Color="Teal" />

    <ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
        <StackLayout>
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
            <Label  Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
        </StackLayout>
    </ScrollView>
    <BoxView Grid.Row="2"  Color="Red" />
    <Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>

Answer 1

Ewerspej's comment on question links to the known issue.

Until this is fixed, a work-around is to set a numeric height on the grid row.

You'll have to manually subtract the heights of other content. In your case, subtract 200 from the screen height:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="{Binding ScrollViewRowHeight, Source={RelativeSource Self}" />
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>

code-behind:

  public double ScrollViewRowHeight { get; set; }

  ...
  // constructor
  public MyPageNameHere()
  {
      InitializeComponent();

      var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
      ScrollViewRowHeight = screenHeight - 200;

      ...
  }