Search code examples
layoutgridmauitabbedpage

MAUI Grid overflows child ContentPage of parent TabbedPage on initial load and when resizing on Windows

I have this issue filed in github with the MAUI team as a bug but looking for any ideas for a workaround?

I have a simple layout in a Grid below.

    <Grid RowDefinitions="Auto,*,Auto">
        <SearchBar />
        <ListView Grid.Row="1">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>ListView Item</x:String>
                    <!-- Whole lot 'O items -->
                    <x:String>ListView Item</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
        <HorizontalStackLayout Grid.Row="2">
            <Button Text="Display Content Page" Clicked="ContentPageButton_Clicked" />
            <Button Text="Display Tabbed Page" Clicked="TabbedPageButton_Clicked" />
        </HorizontalStackLayout>
    </Grid>

When this is in a child page of a TabbedPage, the buttons at the bottom are not visible because the Grid overflows the height of the window. This happens upon initial display and as well as when resizing below a certain height.

Actual layout:

enter image description here

Expected layout:

enter image description here

I have a repro that let's you view the exact same page without the TabbedPage as a parent and the layout performs as expected.

Any ideas how to workaround this issue? Thanks for any suggestions!!!

Solution

  • Thank you for the feedback, in the end your responses got me part of the way there!

    I found one odd hack that seems to refresh the layout of the child page below. This is working consistently for all page sizes and upon initial display of the page.

    In the TabbedPage xaml:

    <TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:MauiApp1"
        x:Class="MauiApp1.TabbedPage" 
        SizeChanged="TabbedPage_SizeChanged"

    In the code behind:

        private void TabbedPage_SizeChanged(object sender, EventArgs e)
    {
        this.CurrentPage.HeightRequest = this.Height;
        this.CurrentPage.HeightRequest = -1;
    }