Search code examples
iosmaui

.NET MAUI: The Content page CollectionView items collide with each other

When I try to scroll top to bottom at that time, the CollectionView items collide on the Content page 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:

![enter image description here

Screen Record:

screen record link

I am using CollectionView for this content page, 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.

Update

I have created a sample project and uploaded it here.

Expected UI:

enter image description here

Solution

  • Set Grid with Height instead of inner stack layout of Listview