Update cell background in Xamarin Form iOS - ios

Question

Does anyone encounter annoyed issue when update background color of cell in xamarin form?
I have notification list, when user clicks on item, it's marked as read then background color will be updated.
It works perfectly on android but iOS.
Most of the time the color is changed back to origin.
In the example, cell background is blue if notification is read.
When user clicks on cell, cell background should be red, but it's not changed most of time.
Notification Model
public class Notification : ObservableObject
{
private string _message;
private bool _isRead;
public string Message
{
get => _message;
set => SetProperty(ref _message, value);
}
public bool IsRead
{
get => _isRead;
set => SetProperty(ref _isRead, value);
}
}
ViewModel
public class MainPageViewModel : BaseViewModel
{
private ObservableCollection<Notification> _notifications;
public ObservableCollection<Notification> Notifications
{
get => _notifications;
set => SetProperty(ref _notifications, value);
}
public ICommand TappedCommand => new Command((o => OnTapped(o)));
public MainPageViewModel()
{
_notifications = new ObservableCollection<Notification>()
{
new Notification()
{
IsRead = false,
Message = "First notification"
},
new Notification()
{
IsRead = false,
Message = "Second notification"
},
new Notification()
{
IsRead = false,
Message = "Third notification"
},
new Notification()
{
IsRead = false,
Message = "Fourth notification"
}
};
}
private void OnTapped(object o)
{
if(!(o is Notification noti)) return;
noti.IsRead = true;
}
}
Page:
<?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:local="clr-namespace:NotificationTest"
x:Class="NotificationTest.MainPage">
<ContentPage.Content>
<ListView x:Name="NotiList" ItemsSource="{Binding Notifications}" ItemTapped="OnTapped" ItemSelected="OnSelected" CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="{Binding IsRead,Converter={StaticResource ReadToColorConverter}}">
<Label Text="{Binding Message}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
Page code behind ( just work around to hide selected line color in listview
public partial class MainPage : ContentPage
{
private MainPageViewModel _vm;
public MainPage()
{
InitializeComponent();
_vm = new MainPageViewModel();
BindingContext = _vm;
}
private void OnTapped(object sender, ItemTappedEventArgs e)
{
_vm.TappedCommand.Execute(e.Item);
}
private void OnSelected(object sender, SelectedItemChangedEventArgs e)
{
NotiList.SelectedItem = null;
}
}

Answer 1

The problem was caused by the default behavior when selecting cell in iOS.
The default selected color will cover the red color , so it didn't get working.
Refer to my recent answer Here
Test