CODEWITHSUNDEEP
layoutgridmauitabbedpage
dalchri
dalchri

Reputation: 151

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!!!

Upvotes: 1

Views: 521

Answers (3)

dalchri
dalchri

Reputation: 151

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

Upvotes: 1

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4606

I found that you can use the ScrollView as a workaround. Besides, if you make the window to the full screen, it also can show the button.

<ScrollView>
    <Grid RowDefinitions="Auto,*,Auto">
    <SearchBar />
    <StackLayout Grid.Row="1">
        <ListView>
        <ListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>ListView Item</x:String>
                <x:String>ListView Item</x:String>
   
            </x:Array>
        </ListView.ItemsSource>
    </ListView>
 
    </StackLayout>
   
    <StackLayout Grid.Row="2">
          <HorizontalStackLayout>
        <Button Text="Display Content Page" Clicked="ContentPageButton_Clicked" />
        <Button Text="Display Tabbed Page" Clicked="TabbedPageButton_Clicked" />
    </HorizontalStackLayout>
    </StackLayout>
</Grid>
</ScrollView>

Upvotes: 2

Poulpynator
Poulpynator

Reputation: 1186

Inside App.xaml.cs change :

// MainPage = new TabbedPage();
MainPage = new NavigationPage(new TabbedPage());

NavigationPage allow you to, well, navigate with Navigation.PushAsync so you should use that instead of Application.Current.MainPage = new TabbedPage();.

You can also go with the AppShell.

Now to why it resolve your specific problem, no clues. My best guess is that the MainPage is not intended (and tested) to get much else than a NavigationPage or a Shell which produce some shenanigans on the layout (both implements IPageContainer, that may do something at this level).

Upvotes: 0

Related Questions