Click here to Skip to main content
15,904,288 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

XML
<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>
                <!--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>


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:

C#
<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!
Posted

1 solution

The * does not mean resize to the content. It means occupy the remaining space in the grid. You've got 3 row definitions, one 40 pixels high, another of 10 pixels, and whatever the remaining space in the grid is for the last row.

Note, I said pixels when it's actually "device independent units", but that's a mouthful and easier to say "pixels".

Change the * to Auto and it'll resize the row to its content.
 
Share this answer
 
v2
Comments
Baraiboapex 13-May-24 10:10am    
Okay. I got it working, thanks for the help! However, now I cannot expand the child collection view which is also required since apparently, it's not hitting the tap event I created for it. I'll open up a separate question for this here shortly, if needed.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900