CollectionView inside a StackLayout overflows screen and prevents last items to show

Question

When I have a CollectionView inside a StackLayout, the Collection view goes past the bottom safe margin. This causes that the last 2-3 items are not accessible. The show if I scroll, but as soon as it gets to the bottom, the list goes backup 3 items.

For context, my project is on .Net 7, running on VS for Mac 17.6(1575).

Here's a screenshot on how it looks when inside a StackLayout and when outside the StackLayout.

Answer 1

Hello,

This issue has been discussed in detail on GitHub, which you could refer to CollectionView requires ScrollView #8097 for getting solutions from hartez's reply.

Solution 1. Use Grid instead of StackLayout.

This is the layout you're looking for:

<Grid RowDefinitions="Auto,*">
    <Label Text="Drivers List" Grid.Row="0" />

    <CollectionView Grid.Row="1" ...>
    </CollectionView>
</Grid>

The Label goes in the first row of the Grid, which gets sized to fit the Label. The second row of the Grid is allotted the rest of the screen space; the CollectionView goes there.

Solution 2. Use VerticalOptions="FillAndExpand".

You can also do this (note StackLayout, not VerticalStackLayout)...

<StackLayout>
    <Label Text="Drivers List"  />

    <CollectionView VerticalOptions="FillAndExpand" ...>
    </CollectionView>
</Grid>

... if you really, really want to use the obsolete "AndExpand" stuff. But at runtime that's literally just going to translate to the Grid layout I posted above.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.