Description
openedon Jan 20, 2024
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.
After initial display a resize will usually reset the layout so the buttons are visible.
Steps to Reproduce
- 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.
- 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.
- 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.
- 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