Skip to content

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

Open

Description

Description

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.

image

After initial display a resize will usually reset the layout so the buttons are visible.

image

Steps to Reproduce

  1. Run the linked repro on Windows

Expected Outcome

The Buttons below the ListView are visible at the bottom of the window and the ListView takes up the remaining available height.

Actual Outcome

When the window is initially displayed the scrollbar on the ListView extends beyond the bottom of the window. Also, the Buttons below the ListView are not visible. The Grid has overrun the height of the window.

  1. Resize the TabbedPage.

Expected Outcome

The Buttons below the ListView are visible at the bottom of the window and the ListView takes up the remaining available height.

Actual Outcome

Works as expected for awhile but it is inconsistent. I think there is some subtlety with a height only resize vs height + width resize I have not figured out yet.

  1. Continue to shrink the size of the TabbedPage.

Expected Outcome

The Buttons below the ListView are visible at the bottom of the window and the ListView takes up the remaining available height.

Actual Outcome

Eventually the Buttons will disappear again. It's not that there is a minimum size to the layout and they gradually get clipped by the window as it shrinks. They instantly disappear as the Grid layout overflows the window height. You can watch the height of the scrollbar on the ListView as you resize the window and see that ListView instantly jumps in height.

  1. Click the button that says Display Content Page. This will display the child ContentPage without the TabbedPage as a parent. Repeat steps 1-3 above.

Expected Outcome

The Buttons below the ListView are visible at the bottom of the window and the ListView takes up the remaining available height.

Actual Outcome

Works as expected.

Link to public reproduction project repository

https://github.com/dalchri/MauiTabbedPageWindowsResizeRepro

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

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;
        }

Relevant log output

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    area-controls-tabbedpageTabbedPagearea-layoutStackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenterlayout-gridplatform/windows 🪟s/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions