Xamarin ListView does not update item property

Question

I face an issue on Xamarin.Forms with ListView (and CollectionView that I tried too). I had some troubles with performances (thread on XF forum) which are solved, but I have still one problem : items are not updated in "real time" when their property change.

I have an ObservableCollection of Category (which is a collection of Score) and another ObservableCollection with scores that have a IsFavorite property set to true. The Score class implements INotifyPropertyChanged (and obviously setting IsFavorite raises the event). I display them in 2 ListViews, in 2 different tabs (using TabbedPage) : each cell has some text, and a Button with a text binded to Score.IsFavorite.

The problem : when I push this button, the FavoritesList is correctly modified, and the cell in the main ListView is modified too... BUT I have to scroll down and up to make the corresponding ViewCell disappear and then reappear, to see the change. Else, the Button.Text keeps showing the old value !

Some code :

The Score and Category classes :

public class Score : HasPropertyChanging, IComparable<Score>
{
    // Other properties...
    // The HasPropertyChanging abstract class implements INotifyPropertyChanged

    private bool _isFavorite;
    public bool IsFavorite { get => _isFavorite; set => _isFavorite = SetFieldValueAndNotify(value); }
}

public class Category : ObservableCollection<Score>
{
    public string Name { get; set; }
}

The ViewModel:

public class ScoreListViewModel : ViewModelBase
{
    // Lists of categories and scores : Categories<Score> (not ordered) / all scores (order AZ) / favorites (order AZ)
    public ObservableCollection<Category> Categories { get; set; } = new ObservableCollection<Category>();
    public ObservableCollection<Score> Scores { get; set; } = new ObservableCollection<Score>();
    public ObservableCollection<Score> FavoriteScores { get; set; } = new ObservableCollection<Score>();

    public ScoreListViewModel()
    {
        this.InitializeScoreList();
    }

    // Toggle favorite status (raised from ICommand in XAML)
    public void ToggleFavorites(Score score)
    {
        score.IsFavorite = !score.IsFavorite;

        if (score.IsFavorite)
            this.FavoriteScores.AddSorted(score);

        else
            this.FavoriteScores.Remove(score);
    }
}

And the View:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:CardioCALC"
    x:Class="CardioCALC.ScoreListPage"
    x:Name="ThisPage"
    x:DataType="viewmodels:ScoreListViewModel"
    BindingContext="{x:Static viewmodels:ScoreListViewModel.Instance}">

    <ListView
        ItemsSource="{Binding Categories}"
        IsGroupingEnabled="True"
        GroupDisplayBinding="{Binding Name}"
        HasUnevenRows="True"
        CachingStrategy="RecycleElement">

        <ListView.ItemTemplate>
            <DataTemplate x:DataType="viewmodels:Score">
                <ViewCell Height="70">
                    <Grid BackgroundColor="White" Padding="20, 5, 10, 5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="1.5*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="50" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding DisplayName}" FontSize="17" Grid.Column="0" Grid.Row="0" />
                        <Label Text="{Binding Detail}" FontSize="13" Opacity="0.6" Grid.Column="0" Grid.Row="1" />
                        <Button Text="{Binding IsFavorite, Converter={StaticResource FavoritesDisplayValueConverter}}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
                                Clicked="OnFavButtonClicked"
                                Command="{Binding Source={x:Reference ThisPage}, Path=ToogleFavorites}" CommandParameter="{Binding .}" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

(Note : I simplified a bit the ViewModel, that uses actually a singleton instance to be shared between the 2 pages...)

Someone has an idea ?

Thanks, Olivier

Answer 1

Well,

For the moment I have to use a trick : the OnFavButtonClicked method does that :

Button button = sender as Button;
button.Text = ((Score)button.BindingContext).IsFavorite.ToString();

This works but it looks very bad and it is incomplete as I have in fact 2 ListView in 2 tabs, which share the same objects (Score) so I'd like the changes on one ListView to update the other...

Any idea ?

Answer 2

Well, some update...

I made a very very big mistake while implementing INotifyPropertyChanged in my ViewModelBase... I don't know why I did not notice this before, because it was not functionnal in other pages...

I was using a method which raises the PropertyChanged event, and then returns the value for the property. Doing that, I could write :

protected T SetPropertyValueAndNotify(T value, [CallerMemberName] string propertyName = null)
{
     PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
     return value;
}

private bool _myProperty;
public bool MyProperty
{
     get => _myProperty;
     set => _myProperty = SetPropertyValueAndNotify(value);
}

BUT ! Doing that, I notified the XAML template only when changing the property twice !!

So... resolved, and sorry ! Olivier