.NET MAUI CollectionView scroll height not updating when IsVisible is changed on items

Question

I have a CollectionView on a .NET MAUI Application, which shows a list of components. It is configured as follows:

<Grid Grid.Row="2" RowDefinitions="*">
    <CollectionView ItemsSource="{Binding Source={x:Reference self}, Path=QuestionComponentList}"
                    ItemSizingStrategy="MeasureAllItems"
                    x:DataType="local:QuestionComponentVM"
                    SelectionMode="None"
                    ItemTemplate="{StaticResource componentSelector}"/>
</Grid>

The componentSelector is defined within the same page, as (some of the data templates are omitted for brevity, but they all follow the same pattern, and of relevance to this question, all contain IsVisible="{Binding HasOptions}":

<DataTemplate x:Key="photo" x:DataType="local:QuestionComponentVM">
    <local:PhotoComponent PhotoAdded="OnPhotoAdded" 
                          PhotoDeleted="OnPhotoDeleted" 
                          ChangeMade="QcLayout_OnChangeRequiresSaving" 
                          IsVisible="{Binding HasOptions}" 
                          QuestionComponent="{Binding .}"/>
</DataTemplate>

<local:QuestionComponentDataTemplateSelector x:Key="componentSelector"
                                             ValueTemplate="{StaticResource value}"
                                             RadioButtonTemplate="{StaticResource radiobutton}"
                                             CheckboxTemplate="{StaticResource checkbox}"
                                             PickerTemplate="{StaticResource picker}"
                                             PhotoTemplate="{StaticResource photo}"
                                             PredefinedTemplate="{StaticResource predefined}" />

When the list is initially displayed, some of the items are not rendered which is desired behaviour. However, when the data changes, the value of HasOptions may change - and if it becomes true, then that item should (and does) render.

The problem is that even though the new items render, it is not possible to scroll to them - the CollectionView doesn't seem to recognise that the size of its content has changed. I have tried everything I can think of. I'm sure the binding is correct, as items appear and disappear as expected. I'm just trying to work out how to get the CollectionView to let me scroll past its initial 'end' point. The images below show how the contents update - you can see the new item appears - but it's impossible to scroll to it.

This is the CollectionView scrolled all the way to the bottom:

And this is after a change on the page results in IsVisible becoming true for another item in the list:

As is shown, the item is indeed now rendered, but it's impossible to scroll down (up?) to it.

Answer 1

Thanks to Azeem - I changed from binding IsVisible to using an ObservableCollection and, in order to prevent the list jumping back to the beginning when items either became visible or hidden, inserted and removed items from the ObservableCollection - so essentially filtering the components on their desired visibility. Problem solved.