How do I make a list item the full height of it’s content in IOS? (using a grid “*” row seems to be broken in IOS)

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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code> <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>
</code>
<code> <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> </code>
    <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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>public ICommand SectionTapped => new Command<SessionSummarySection>(OnSectionTapped);
//......
private void OnSectionTapped(SessionSummarySection sessionSummarySection)
{
sessionSummarySection.Expanded = !sessionSummarySection.Expanded;
}
</code>
<code>public ICommand SectionTapped => new Command<SessionSummarySection>(OnSectionTapped); //...... private void OnSectionTapped(SessionSummarySection sessionSummarySection) { sessionSummarySection.Expanded = !sessionSummarySection.Expanded; } </code>
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:

enter image description here

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.)

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật