CollectionView's VerticalOptions are not working as intended on iOS.

[cat0363]

Description

Layout as below to reproduce the problem.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="44" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <CollectionView Grid.Row="0" x:Name="cvTestItem" ItemsLayout="VerticalGrid, 5" Margin="2" VerticalOptions="Start" BackgroundColor="Red">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid HeightRequest="60">
                    <Border WidthRequest="{Binding Path=WidthRequest, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}" Stroke="#08449E" BackgroundColor="White" StrokeThickness="1" StrokeShape="RoundRectangle 5,5,5,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2" Padding="0">
                        <Label FontSize="18" Text="{Binding ItemName}" TextColor="#08449E" VerticalOptions="Center" HorizontalOptions="Center" />
                    </Border>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    <Button Grid.Row="1" Text="Test" BackgroundColor="Blue" TextColor="White" />

    <Grid Grid.Row="2" BackgroundColor="Yellow" />
</Grid>

The layout above is a simple layout with a CollectionView in the 1st row of the Grid,
a Button in the 2nd row, and a Grid in the 3rd row. The CollectionView in the 1st row is a
5-column display with an element height of 60 and the VerticalOptions of the
CollectionView is Start.

On iOS, the entire screen is filled even though Start is specified in the VerticalOptions
of the CollectionView on the 1st row. VerticalOptions are not reflected as intended.

[.NET MAUI iOS]

On Android the CollectionView's VerticalOptions are working as intended.

[.NET MAUI Android]

In Xamarin.Forms, we know that we have the following issues:
xamarin/Xamarin.Forms#5942

Xamarin.Forms uses Frame instead of Border, but wrapping a CollectionView into a StackLayout
doesn't get around the problem. In Xamarin.Forms the 1st row CollectionView and the 2nd row
Button are displayed and for some reason the 3rd row is not displayed.

Any good ideas?

Steps to Reproduce

The steps to reproduce are as follows.

1. Launch the app uploaded to github on your iOS device

As of step 1, the 1st row of the Grid's CollectionView fills the entire screen.
Grid on the 2nd row and Button on the 3rd row are not displayed.

I expected the CollectionView to be top aligned depending on the number of
elements inside the CollectionView. (I expected it to be displayed in the same
way as the Android execution result.)

Link to public reproduction project repository

https://github.com/cat0363/Maui-IssueCollectionView.git

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

If you don't need the nice benefits of CollectionView, you can get around it by
using FlexLayout and BindableLayout instead of CollectionView.

Layout as follows.

<FlexLayout Grid.Row="0" x:Name="cvTestItem" Direction="Row" Wrap="Wrap" Margin="2" VerticalOptions="Start" BackgroundColor="Red">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="60" FlexLayout.Basis="19.99%">
                <Border WidthRequest="{Binding Path=WidthRequest, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}" Stroke="#08449E" BackgroundColor="White" StrokeThickness="1" StrokeShape="RoundRectangle 5,5,5,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2" Padding="0">
                    <Label FontSize="18" Text="{Binding ItemName}" TextColor="#08449E" VerticalOptions="Center" HorizontalOptions="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

I have 5 columns by setting FlexLayout.Basis="19.99%". Note that FlexLayout.Basis="20.00%"
does not result in 5 columns. This is because the Margin of the FlexLayout has been set.

Set ItemsSource like this:

BindableLayout.SetItemsSource(cvTestItem, TestItems);

I don't want it this way, although I get the expected result.

Relevant log output

No response

[drasticactions]

Trying out your repro project; I wonder if the root issue is the CollectionView layout in general. Based on your Grid, there should still be a visible button at the bottom of the Grid, but it's not. It seems like CollectionView is always taking up the rest of the space in a given area, regardless of the rest of the layout, and that's the bug.

@hartez What do you think?

[jsuarezruiz]

@hartez I think could be interesting to test this scenario with #14951

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[cat0363]

Hi, @drasticactions
Thank you for analyzing on this issue.
I did testing to confirm your guess.
I verified by shifting the first line as follows.

Shifted the first row down one.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="44" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Button Grid.Row="0" Text="Test" BackgroundColor="Blue" TextColor="White" />

    <CollectionView Grid.Row="1" x:Name="cvTestItem" ItemsLayout="VerticalGrid, 5" Margin="2" VerticalOptions="Start" BackgroundColor="Red">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid HeightRequest="60">
                    <Border WidthRequest="{Binding Path=WidthRequest, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}" Stroke="#08449E" BackgroundColor="White" StrokeThickness="1" StrokeShape="RoundRectangle 5,5,5,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2" Padding="0">
                        <Label FontSize="18" Text="{Binding ItemName}" TextColor="#08449E" VerticalOptions="Center" HorizontalOptions="Center" />
                    </Border>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

    <Grid Grid.Row="2" BackgroundColor="Yellow" />
</Grid>

The results are as follows.

Shifted the first row down two.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="44" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button Grid.Row="0" Text="Test" BackgroundColor="Blue" TextColor="White" />

    <Grid Grid.Row="1" BackgroundColor="Yellow" />

    <CollectionView Grid.Row="2" x:Name="cvTestItem" ItemsLayout="VerticalGrid, 5" Margin="2" VerticalOptions="Start" BackgroundColor="Red">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid HeightRequest="60">
                    <Border WidthRequest="{Binding Path=WidthRequest, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}" Stroke="#08449E" BackgroundColor="White" StrokeThickness="1" StrokeShape="RoundRectangle 5,5,5,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="2" Padding="0">
                        <Label FontSize="18" Text="{Binding ItemName}" TextColor="#08449E" VerticalOptions="Center" HorizontalOptions="Center" />
                    </Border>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

The results are as follows.

On Android both results reflected the height of the elements in the CollectionView.
Below are the results on Android.

Android results are what I expected.

[hartez]

Pretty sure this is a duplicate of #9135.

[cat0363]

Thank you to everyone involved in fixing this issue.

[xufeitt]

I set the height in code by items height.