CollectionView with ObservableRangeCollection not updating data change

Question

I want to change the data of one object in my ObservableRangeCollection, and that works but the corresponding 'CollectionView` does not update the changed data.

'CollectionView`

<RefreshView Grid.Row="1"
                         Grid.RowSpan="2"
                         Command="{Binding RefreshCommand}"
                         IsRefreshing="{Binding IsBusy, Mode=OneWay}">

            <CollectionView x:Name="Collection"
                                ItemsSource="{Binding Locations}"
                                SelectionMode="Single"  
                                BackgroundColor="Transparent"
                                ItemsLayout="VerticalList">
                <CollectionView.EmptyView>
                    <StackLayout Padding="12">
                        <Label HorizontalOptions="Center" Text="Keine Daten vorhanden!" TextColor="White"/>
                    </StackLayout>
                </CollectionView.EmptyView>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:MainModel">
                        <Frame HeightRequest="260">
                            <Grid>
                                <Image Source="{Binding Image}"
                                      Aspect="AspectFill"/>
                                <Label Text="{Binding Name}"
                                          FontSize="30"
                                       TextColor="White"/>

                            </Grid>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </RefreshView>

ViewModel

public class MainViewModel : VeiwModelBase
    {
        public ObservableRangeCollection<MainModel> Locations { get; set; } = new ObservableRangeCollection<MainModel>();

        public ICommand RefreshCommand { get; }

        public MainViewModel()
        {
            RefreshCommand = new AsyncCommand(Refresh);
        }

        public override void VModelActive(Page sender, EventArgs eventArgs)
        {
            base.VModelActive(sender, eventArgs);
            var locs = new MainModel() { Image = "https://club-l1.de/wp-content/uploads/2019/11/dsc08645-1200x800.jpg", Name = "Test" };
            Locations.Add(locs);

            foreach (MainModel loc in Locations)
            {
                loc.Name = "Update";
            }
        }

        private async Task Refresh()
        {
            IsBusy = true;


            var locs = new MainModel() { Image = "https://club-l1.de/wp-content/uploads/2019/11/dsc08645-1200x800.jpg", Name = "Test"};
            Locations.Add(locs);

            foreach (MainModel loc in Locations)
            {
                loc.Name = "Update";
            }

            IsBusy = false;
        }
    }

The Project: https://github.com/Crey443/CollectionViewUpdate

Answer 1

MainModel needs to implement INotifyPropertyChanged, and any properties you want to bind (ie, Name) need to call PropertyChanged in their setters

public class MainModel
{
    public string Name { get; set; }
    public string Image { get; set; }
}