How Can You Align a Grid Row to the Top and Bottom and Have the Middle Fill the Rest of the Screen

Question

I'm trying to build a UI where there's a small section that's always at the top of the page, and a small section that's always at the bottom. The middle section I want to have fill up the entire rest of the page height. I thought it would be something like the XAML below but it's not working - the middle section never fills up the available space. Was hoping someone could point out what I'm doing wrong. Simplified markup below:

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

    <HorizontalStackLayout Grid.Row="0" Grid.Column="0">
        <!-- top stuff here -->
    </HorizontalStackLayout>

    <VerticalStackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="Fill">             
        <!-- middle section here  -->
    </VerticalStackLayout>

    <Grid Grid.Row="2" Grid.Column="0">
        <!-- bottom section here -->
    </Grid>
</Grid>

NOTE: When pasting into this question the editor strips out the closing <//Grid> tag.

Answer 1

When in doubt, use ..AndExpand to be sure all space is used.

<Grid RowDefinitions="60,*,60" ColumnDefinitions="*"
      VerticalOptions="FillAndExpand" >
    ...
    <VerticalStackLayout Grid.Row="1" VerticalOptions="FillAndExpand" ...

---

UPDATE

Actually, your original code does what it should for me, testing on both Windows and Android, when I set MainPage = new MainPage(); and have that code in MainPage. With a BackgroundColor on the middle part, so I can see it expand as desired.

So, what is different in your setup?

• Are you using AppShell?
• Testing on platform other than Windows or Android?
• You didn't test the "simplified markup" you show, so the problem is elsewhere in your actual markup?