Xamarin.forms: [Bug] ListView/CollectionView is not filling the entire Screen on some iOS devices

[begreal]

Description

in some iOS devices running on Xamarin 4.1, the Listview or CollectionView is not filling the entire screen. without changing anything in the code, it behaves correct on other devices (refer to the basic information section to see which devices are behaving correctly and which not).

I changed a sample Project from this repository (https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/CollectionViewDemos) to reproduce the issue

MainPage.xaml
<StackLayout Orientation="Vertical">
<Button Text="Navigate" Clicked="Button_Clicked"></Button>
</StackLayout>

MainPage.xaml.cs
private void Button_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new VerticalListTextPage());
}

VerticalListTextPage.xaml
<StackLayout Margin="20">
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
<x:String>Mandrill</x:String>
<x:String>Proboscis Monkey</x:String>
<x:String>Red-shanked Douc</x:String>
<x:String>Gray-shanked Douc</x:String>
<x:String>Golden Snub-nosed Monkey</x:String>
<x:String>Black Snub-nosed Monkey</x:String>
<x:String>Tonkin Snub-nosed Monkey</x:String>
<x:String>Thomas's Langur</x:String>
<x:String>Purple-faced Langur</x:String>
<x:String>Gelada</x:String>
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
<x:String>Mandrill</x:String>
<x:String>Proboscis Monkey</x:String>
<x:String>Red-shanked Douc</x:String>
<x:String>Gray-shanked Douc</x:String>
<x:String>Golden Snub-nosed Monkey</x:String>
<x:String>Black Snub-nosed Monkey</x:String>
<x:String>Tonkin Snub-nosed Monkey</x:String>
<x:String>Thomas's Langur</x:String>
<x:String>Purple-faced Langur</x:String>
<x:String>Gelada</x:String>
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
<x:String>Mandrill</x:String>
<x:String>Proboscis Monkey</x:String>
<x:String>Red-shanked Douc</x:String>
<x:String>Gray-shanked Douc</x:String>
<x:String>Golden Snub-nosed Monkey</x:String>
<x:String>Black Snub-nosed Monkey</x:String>
<x:String>Tonkin Snub-nosed Monkey</x:String>
<x:String>Thomas's Langur</x:String>
<x:String>Purple-faced Langur</x:String>
<x:String>Gelada</x:String>
</x:Array>
</CollectionView.ItemsSource>
</CollectionView>
</StackLayout>

Steps to Reproduce

1. checkout sample project from Xamarin
2. change the code with my code listed above

Expected Behavior

ListView/CollectionView should fill the entire screen

Actual Behavior

ListView/CollectionView is not filling the entire screen and is cutted approximately in the middle

Basic Information

Tested with iOS simulators:

• iPhone XS Max 12.2 -> wrong behaviour
• iPhone XS 12.2 -> wrong behaviour
• iPhone X 12.2-> expected behaviour
• iPhone XR 12.2 -> expected behaviour

And also tested with real Devices:

• iPhone X 12.3.1 -> wrong behaviour
• iPhone 6s 10.3.1 -> expected behaviour

Screenshots

Reproduction Link

refer to sample Project here with my changes listed above

[jsuarezruiz]

@begreal I have been testing using the CollectionView sample https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/CollectionViewDemos with the indicated modifications.
I attach the sample.
CollectionViewDemos.zip

I have tried several emulators (especially those indicated with an wrong behavior) and I can not reproduce the problem.

Can you review the sample and modify what is necessary to reproduce the problem?

[begreal]

may i ask which XCode version you are using? i am using 10.2 (10E125)

[begreal]

okay, now i know exactly how to reproduce it:

1. open the app for the first time

2. terminate the app with swiping up

3. open the app again

and it happens on every simulator i listed in the first post

[jsuarezruiz]

I have tried closing the App and reopening and I can reproduce the problem!.

I have done tests in several emulators and also with different Layouts.

I can reproduce it in all the cases. On other platforms, it does not happen.

[begreal]

could you reproduce it in real ios devices? because i can reproduce it there as well, but not always. its behaving different

[Klim-Shoptagr]

We're reproducing this issue on iPhone XS Max (real device) sometimes.

[namhuman]

I'm also having this issue with Forms 4.0

[Tw0bit]

I am having the same issue on my app with the latest XF SR2. I have a StackedView then a ListView. However my app has a TabbedPage and this occurs on all but the first tab. Even loading the same page on all tabs (ie same code)..

Issue on physical and simulator for iPhone X, Xs, Xr range on latest iOS11/12 and even iOS13b5.

My build machine is a MBP with latest Xcode, VS, etc.

I have a version published of my app via Testflight and it randomly has the ListView full screen (second tab, stackview>listview) and other times only half...

[DuncanMcIntyre]

Seeing this bug on simulator and devices as well.
Has anyone figured out a workaround?

[DuncanMcIntyre]

Worked around this issue by pulling out my ListViews as Level 1 child of the Parent Layout.
E.g. I used to have below structure which always worked until XF 4 update:
<Grid> <StackLayout Grid.Row="0"> <StackLayout>[This is my custom Filters bar which IsVisible=false by default]</StackLayout> <ListView></ListView> </StackLayout> <StackLayout Grid.Row="1"> [This is my custom progress message bar which IsVisible=false by default] </StackLayout> </Grid>

The fix was to pullout the ListView from the StackLayout and make it a row of the Grid layout instead of a Child of the StackLayout row like below:
<Grid> <StackLayout Grid.Row="0"> [This is my custom Filters bar which IsVisible=false by default] </StackLayout> <ListView Grid.Row="1"></ListView> <StackLayout Grid.Row="2"> [This is my custom progress message bar which IsVisible=false by default] </StackLayout> </Grid>

[farislivemaker]

Does anyone solve the issue? Used your workaround @DuncanMcIntyre but it doesn't work as excepted for my project.

[diptejboxer]

Try to set listview out of the SL but set in grid. its work for me.
< Grid x:Name="masterGrid" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" ColumnSpacing="1" RowSpacing="1" > < Grid.RowDefinitions>
< RowDefinition Height="50"/>< RowDefinition Height="*"/>< RowDefinition Height="auto"/>
< /Grid.RowDefinitions>< StackLayout Grid.Row="0">[your extra code]< /stacklayout>< Listview Grid.Row="1" VerticalOptions="FillAndExpand" />< StackLayout Grid.Row="2">
[your extra code]
< /stacklayout>
< /grid>
Try This one. i ts work for me

[rajkumarvishnu]

This is a wacky one - happens sporadically.

                <Grid.RowDefinitions>
                    <RowDefinition Height="50" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

is my grid sizing - collection view uses the second row.

The workaround for now is naming the very outermost content view stack layout height and (-50 (first row height)) from it.

protected override void OnAppearing()
        {
            base.OnAppearing();
            collview.HeightRequest = outerstacklaout.Height - 50;
            //you may dynamically calculate the height of any other layouts instead of a static value
        }

I don't think this is a problem isolated to just the collection view. Tried attributing the second row to a stacklayout that is the parent for the collection view - even that failed to size to the screen size.

Will evaluate the workaround and update

[skadookkunnan]

We are also getting this issue in random. It was not happening while we were at the XF 3.x SDK. We recently moved to XF 4.2 SR3 and this started to showing up. Also, it is not reproducible all the time in our case.

There is no log we get in the console while this happens, so, not able to identify the real problem and give a fix.

Is there a hacky fix someone has done for this?

[begreal]

i made a workaround which works pretty well. i've set the height of the ListView to the height of the device display. i am getting this information from Xamarin.Essentials. here is the codeline for the workaround:

            ProductsListView.HeightRequest = DeviceDisplay.MainDisplayInfo.Height;

[ssm3ll]

i made a workaround which works pretty well. i've set the height of the ListView to the height of the device display. i am getting this information from Xamarin.Essentials. here is the codeline for the workaround:

            ProductsListView.HeightRequest = DeviceDisplay.MainDisplayInfo.Height; 

thanks @begreal. this workaround works just fine for me.

[chrisfoulds]

See it also with ListView and FlowListView - something fundamentally broken

[ianthetechie]

It frequently mis-sizes to not account for tab bars when a full screen list view is loaded in landscape orientation. _Xamarin_ is fundamentally broken. It's happened on and off for at least a year.

[chrisfoulds]

I regret upgrading from forms 3.6 so many hacks and workarounds. Stop adding features and make it work, I am working around bugs that have been open months or even years.
This is probably the last big forms project I will do, over to flutter , not out of choice but being forced to due to a broken platform

[chrisfoulds]

Three months to make a listview work, ridiculous

[anpin]

I'm experiencing the same issue with both CollectionView and ListView. Is anyone working on this?

[MJRomka]

@begreal answer seems to be a workaround at the moment.

[pamela032709]

any update on this issue ?

[Wirkstoff]

I am having the same issue.
@begreal workaround doesn't work if the collectionview is part of a tab page. The collectionview is not scrollable then.

[TouchBoarder]

This behavior is still there in Xamarin.Forms 4.4.0.991537 looks to occur mostly on iOS devices with SafeSpaceArea (iPhone X* etc.), setting the ListView.HeightRequest to the Device screen height as suggested by @begreal looks to work for now. I've also experience this behavior with the CarouselView (4.4.0.991537), so it's probably related to something with the the underlying CollectionView control.

[minahenin]

I am using 4.5 and have the same issue on Simulators and Real devices
However it’s not always consistent but very annoying

[minahenin]

Team, is there anything that we can do to help in fixing this issue?

[minahenin]

@samhouts can you help prioritizing this issue please?

[minahenin]

Can you please pick up this defect sooner, I got feedback from many users about this issue and have no resolution for it, I am using the latest version of 4.5

[chrisfoulds]

I use the workaround as above, not had any issues in testing or from customers since.

[minahenin]

I use the workaround as above, not had any issues in testing or from customers since.

Do you mean setting the hieghtrequest to the screen size?

If so it doesn’t seem to work with the new collectionView control also I have the collectionView under RefreshView and doing so Makes it almost impossible to Perform pull to refresh

[lomdar67]

+1

[giuseppenovielli]

Yes, please fix this boring issue!!

Thanks!!

[banjahman]

also experiencing this issue randomly

[znelson32]

Also getting this issue on iPhone 11 Pro devices but can’t narrow down a reproducible scenario yet. My screen has a CollectionView in a TabPage and it happens sporadically. Very frustrating.

[surenkasilsyfinity]

Having the same issue as above on iPhone 11 Pro Max. Please raise priority to attend to this bug as impacted on both ListView and CollectionView.

[BrayanKhosravian]

Use VeritcalOptions for the collectionview. that fixed the issue

[minahenin]

Use VeritcalOptions for the collectionview. that fixed the issue

Can you provide code snippet for the suggested workaround?

[BrayanKhosravian]

@minahenin sure

<CollectionView ItemsSource="{Binding ....}"
                    ItemTemplate="{StaticResource ....}"
                    VerticalOptions="FillAndExpand" />

[znelson32]

Can confirm that VerticalOptions="FillAndExpand" works but only if the CollectionView isn't a child of a Grid. Also, VerticalOptions="StartAndExpand" does not seem to work. Thanks for the heads-up @BrayanKhosravian

[banjahman]

also experiencing this same issue.. xamarin and VS have been on a roll lately with these critical bugs

[alwydl]

Having this issue with sdk 13.20 and XF 4.6 on iOS 13.3.1, but not on iOS13.4.1......Need to test on 13.5

[mina5500]

Issue happens on ios 12.4 but not happening on 13.5
Latest XF 4.7

[AshwinKumaravel]

Make sure listview/Collection view Vertical and Horizontal options are FillAndExpand. And also make sure listview parent's Vertical and Horizontal options are also FillAndExpand. This fixes for me.

[amtoft]

I had the same issues, but eventually figured that my problem was "manually" raising NotifyPropertyChanged on the underlying ObservableCollection instead of just relying on the collection itself to handle changes.
Another change I made, was to make sure the items in the collection were "simple items", which would not themselves trigger changes to properties (thereby triggering new layout updates/cycles).

[ChipiCoding]

I have the same problem with Xamarin 4.8 :(

[Elinareso]

This issue in still there. Ramdomically the CollectionView is not filling the entire Screen. I have a StackLayout and CollectionVIew with the HorizontalOptions and VerticalOptions to FillAndExpand and does not seem to work.

Any other ideas?

[giuseppenovielli]

I have the same problem with CarouselView with iOS 14.1. Xamarin.Forms 4.8!

With Grid as parent of CarouselView it seems to be fixed.

[ipon85]

I fix it with setting HeightRequest = 3000 for ListView with VerticalOptions="FillAndExpand". Occurs on XF 4.8.0.156, on different physical devices(e.g. iphone 6, 11, Xr), but not on emulators