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 "*" after being made visible by a boolean. The code below demonstrates the issue that I am having:
Here is the xaml code Notice how I tried to even give the parent elements a fixed height from the collection view that needs to expand to the height of the parent collection view's 10000 unit height:
<pre><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>
<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"/>
<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>
Here is the current template of the "section selector"
Here is the c# view model expansion method tied to the Binding "Expanded" boolean mentioned earlier in the code behind:
<pre>public ICommand SectionTapped => new Command<SessionSummarySection>(OnSectionTapped);
private void OnSectionTapped(SessionSummarySection sessionSummarySection)
{
sessionSummarySection.Expanded = !sessionSummarySection.Expanded;
}
I also have an attached image of what the expected behavior should be please refer to that for more details on how this code should work:
(Note, I asked the same question on stack overflow, but with no luck. Someone suggested that I try an approach where I use pop-ups to display details, but I would rather not go this route.)
Image of the behavior that I expect in the nested collection views
What I have tried:
As you can see, I have tried to get the layout to behave by setting the parent UI elements with a fixed height so that the grid can fill and expand in each item in the collection view according to the collection view's parent, but to no avail.
The only other way that I can think of to get this to work is by manually setting the height of each grid in each collection view element with hard values and not values like "6*" or "*" but that would mean I would have to add up the height of the content of each list item by grabbing the actual visual element tree from each grid with an x:Name reference or something like that (which I have no idea how to do). If anyone knows another way or can please show me how to get this to work that would be great.
Side notes, if I let the page re-render via hot reload, it will suddenly work for some reason, which means this is a MAUI-specific bug (I think). Another thing to note is that this solution needs to be cross platform with not only IOS, but android as well. So again, any advice on how to fix this issue would be very helpful indeed. Also, if you don't mind explicitly letting me know if the solution is free for me to use for a commercial project, let me know so that I can attribute you accordingly. Thanks! (If not, I will put my own spin on it, just to be safe.)
I am affraid that this is honestly yet another issue with MAUI that needs to be reported. Any work around would be greatly appreciated. Thanks!