MAUI: The CollectionView items collide with each other when scrolling

Question

When I try to scroll top to bottom at that time, the CollectionView items collide on the iOS platform, but it works fine on the Android platform. Below, I am adding a screenshot and Screen record of this issue.

Screenshot:

Screen Record:

screen record link

I am using CollectionView, the below is the code:

<CollectionView  
    Grid.Row="1"
    ZIndex="5"
    Margin="5,0"
    IsVisible="false"
    SelectionMode="Single"
    BackgroundColor="Transparent"
    x:Name="AccountInvoicelistview"
    ItemsLayout="VerticalGrid"
    SelectionChanged="invoice_ItemTapped">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout 
                HorizontalOptions="FillAndExpand" 
                Orientation="Vertical" 
                BackgroundColor="{Binding invoice.BGColor}"
                Padding="5">
                
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75*"/>
                        <ColumnDefinition Width="25*"/>
                    </Grid.ColumnDefinitions>

                    <Label 
                        Text="{Binding invoice.title, Converter={StaticResource specialCharactorConverter}}"
                    </Label>

                    <Label 
                        Text="{Binding invoice.status, Converter={StaticResource specialCharactorConverter}}"
                    </Label>
                </Grid>

                <Label 
                    Text="{Binding createdLocation.locationName, Converter={StaticResource specialCharactorConverter}}"
                </Label>

                <StackLayout
                    Margin="5,0"
                    HorizontalOptions="StartAndExpand"
                    VerticalOptions="StartAndExpand"
                    IsVisible="{Binding LockedVisibility}"
                    Orientation="Horizontal">

                    <Label 
                        Text="{Binding lockedLocation.locakedStatusText, Converter={StaticResource specialCharactorConverter}}"
                    </Label>

                    <Image 
                        Style="{StaticResource RequestHeaderImageStyle}" 
                        Source="ic_green_tick_xx.png">
                    </Image>
                </StackLayout>

                <StackLayout
                    Orientation="Horizontal"
                    HorizontalOptions="FillAndExpand">

                    <Label 
                        Text="{Binding invoice.Amount, StringFormat='${0:F0}'}"
                    </Label>

                    <Label 
                        Text="{Binding invoice.dueDate, StringFormat='Due date: {0:F0}', 
                    </Label>
                </StackLayout>
                
                <BoxView
                    HeightRequest="1"
                    Margin="0,5,0,0"
                    BackgroundColor="#cecece"
                    HorizontalOptions="FillAndExpand"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Can you please provide me with a solution to resolve this issue? This issue is only on iOS platform.

Answer 1

Hello,

After testing, this should be due to layout height distribution issues.

You could include this code in a VerticalStackLayout.

<StackLayout
                    Margin="5,0"
                    HorizontalOptions="StartAndExpand"
                    VerticalOptions="StartAndExpand"
                    IsVisible="{Binding LockedVisibility}"
                    Orientation="Horizontal">

                    <Label 
                        Text="{Binding lockedLocation.locakedStatusText, Converter={StaticResource specialCharactorConverter}}"
                    </Label>

                    <Image 
                        Style="{StaticResource RequestHeaderImageStyle}" 
                        Source="ic_green_tick_xx.png">
                    </Image>
                </StackLayout>

                <StackLayout
                    Orientation="Horizontal"
                    HorizontalOptions="FillAndExpand">

                    <Label 
                        Text="{Binding invoice.Amount, StringFormat='${0:F0}'}"
                    </Label>

                    <Label 
                        Text="{Binding invoice.dueDate, StringFormat='Due date: {0:F0}', 
                    </Label>
                </StackLayout>

As a side note, StackLayout in MAUI does not use layout properties with the same orientation.

A StackLayout only respects the Start, Center, End, and Fill LayoutOptions fields on child views that are in the opposite direction to the StackLayout orientation. Therefore, child views within a vertically oriented StackLayout can set their HorizontalOptions properties to one of the Start, Center, End, or Fill fields. Similarly, child views within a horizontally oriented StackLayout can set their VerticalOptions properties to one of the Start, Center, End, or Fill fields. A StackLayout does not respect the Start, Center, End, and Fill LayoutOptions fields on child views that are in the same direction as the StackLayout orientation. Therefore, a vertically oriented StackLayout ignores the Start, Center, End, or Fill fields if they are set on the VerticalOptions properties of child views. Similarly, a horizontally oriented StackLayout ignores the Start, Center, End, or Fill fields if they are set on the HorizontalOptions properties of child views.

You could refer to Align and position .NET MAUI controls for more detailed information.

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.