Grid height "*" not working inside of nested collection views in iOS

Baraiboapex commented 5 months ago

Description

I have a list item in .net MAUI for IOS that is not working as expected. It appears that the issues lie in the fact that the grid visual elements within each individual item in the collection view are not expanding to the full height of the list item's content when their grid rows are set to have a grid row height of "*"

Steps to Reproduce

1.) Add a grid inside of a nested collection view as showin in the code below:

<ContentPage.Content>
    <Grid RowDefinitions="10000" BackgroundColor="BlanchedAlmond">
    ....
        <VerticalStackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="Aquamarine">
            <VerticalStackLayout IsVisible="{Binding ShowBusyOverlay, Converter={StaticResource not}}" HeightRequest="10000">
                <CollectionView x:Name="sessionSummaryList" ItemsSource="{Binding DataSections}" HeightRequest="10000">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="datacollection:DataSection">
                            <Grid>
                                <!--Here is where the issue lies with the grid star "*" height in the collection view list item-->
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40"/>
                                    <RowDefinition Height="10"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <HorizontalStackLayout Margin="10, 5" Grid.Row="0" Grid.Column="0">
                                    <HorizontalStackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding BindingContext.SectionTapped, Source={x:Reference Form} }" CommandParameter="{Binding .}" />
                                    </HorizontalStackLayout.GestureRecognizers>
                                    <Label Text="{Binding Title}" Style="{StaticResource label}" MinimumHeightRequest="40" VerticalTextAlignment="Center" TextColor="{StaticResource normalText}" FontAttributes="Bold" />
                                    <Image  Source="{Binding Expanded, Converter={StaticResource expandedImageConverter}}" HorizontalOptions="End" HeightRequest="20" WidthRequest="20" Aspect="AspectFit" />
                                </HorizontalStackLayout>
                                <BoxView Grid.Row="1" Grid.Column="0" Color="#b9b9b9"/>
                                <!--This is where the expansion boolean is that I mentioned earlier "{Binding Expanded}"-->
                                <CollectionView Grid.Row="2" Grid.Column="0" IsVisible="{Binding Expanded}" ItemsSource="{Binding SectionItems}" ItemTemplate="{StaticResource SectionSelector}" EmptyView="No items to display" BackgroundColor="White"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            ....
            </VerticalStackLayout>
        ....
        </VerticalStackLayout>
    ....
    </Grid>
.......
</ContentPage>

2.) Add an event handler on the MVVM view model that causes the nested collection view inside aforementioned grid to be visible after setting this grid row to a height of "*":

public ICommand SectionTapped => new Command<SessionSummarySection>(OnSectionTapped);
//......
private void OnSectionTapped(SessionSummarySection sessionSummarySection)
{
    sessionSummarySection.Expanded = !sessionSummarySection.Expanded;

}

3.) Click the parent collection view item. The expected results are that the parent collection view automatically adjusts its height to the content in the child collection view, like it does in android, however, the following issue occurs as shown on the image below:

fix

NOTE: Let me know as soon as possible if a repo is needed for the reproduction of this issue. I will get one up as soon as I can. Thanks.

Link to public reproduction project repository

No response

Version with bug

9.0.0-preview.3.10457

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17.2

Did you find any workaround?

No

Relevant log output

No response

github-actions[bot] commented 5 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

ListView/CollectionView faulty height calculation in Grid with multiple columns (#21974), similarity score: 0.84
In iOS, CollectionView row does not shift down if row above it resizes (#22082), similarity score: 0.82

Closed similar issues:

[MAUI8] [iOS] Star Height of Grid.Row with CollectionView isn't correct (#18348), similarity score: 0.85
Grid row not sizing correctly with * when the content is a collectionview on iOS (#15092), similarity score: 0.85
CollectionView inside a Grid completely wrong measurements. (#15553), similarity score: 0.82

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

Baraiboapex commented 5 months ago

Hi Javier, Just to keep you informed.

I do apologize for my misunderstanding into the grid "*" RowHeight property. This does not mean fill and expand the remaining area in the grid and adjust its height to the content, it just simply means fill and expand the area of what is left in the grid. But still even with this property filled out this way, it does work on android because, correct me if I'm wrong, the CollectionView is suppose to expand to the height of its overall content, correct? Thanks for noticing this.

Baraiboapex commented 4 months ago

@jsuarezruiz

This is a little off topic, but I forked and cloned the maui repo, and I would like to take a crack at fixing an issue with the IOS Collection View. (Wish me luck) Where should I post questions to talk with you guys to ask questions during development? (I will do my best to be respectful of your time.) Also, here is my first question, LOL What file/folder would the collection view be under in the project? It's huge! xD I saw a lot of collection view files for iOS, but I'm unsure which one is the designated "starting point". I will also watch the video to show how to launch/work on an issue that you have posted on YouTube. Just wanted to try and take some initiative on this. Also, I will ask one more question, would you say that the maui iOS native SDK is stable enough to fix this so that I can use that?

QianaJiao commented 3 months ago

Hi @Baraiboapex. I tried to paste this code into my template project, but some associated resources are missing. So if possible, could you give me a repo and I'll verify if it still repro on latest version.

mattleibow commented 3 months ago

I think the issue is with how the controls work.

One issue that will appear once you get items is that you have a CollectionView inside a VerticalStackLayout. What will happen here is that the collection view will grow to as big as possible, and this means that it will show all items and not be scrollable. This will affect both the outer and inner collection views.

For the other issue with the expander, a Grid * will make the row grow as big as possible, but the collection view items are trying to be as small as possible and this sort of cancels each other out as the collection view item will basically ask the grid to grow as big as possible in the smallest space.

What you maybe want to do here is use the vertical stack instead of a grid, or at least wrap the collection view. However, this will lead to the first issue.

Also, with nested collection views, the performance will not be so great as each row will have to recreate the entire nested list view as you scroll.

Depending on the number of items you have to display, it may just be better to use a bindable layout in a scroll view. This is only good if there are a few items - like 5 or so - as this will render all the items at once. However, if there are more, then maybe changing the structure of the page to be a popup or details page is going to give you better performance.

mattleibow commented 3 months ago

This blog post has a similar layout to yours, so it may have what you are looking for along with some other good tips. https://dev.to/davidortinau/all-the-lists-in-net-maui-33bd

Specifically: https://dev.to/davidortinau/all-the-lists-in-net-maui-33bd#layout-4-learning-course-expand-and-contract

dotnet-policy-service[bot] commented 3 months ago

Hi @Baraiboapex. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

dotnet-policy-service[bot] commented 3 months ago

Hi @Baraiboapex. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

dotnet-policy-service[bot] commented 3 months ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

dotnet-policy-service[bot] commented 3 months ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

dotnet / maui