Xamarin Dynamically Update specific DataTemplate item Property in CollectionView with unique value

Question

<CollectionView ItemsSource="{Binding ProductDb}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="{Binding ItemStatus}" />
                <Label Text="{Binding ItemId}" />
                <Label Text="{Binding ItemDescription}" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

The collectionView is first loaded from the database and wait for a specific event occurring in the code. The ItemStatus for all Item data property initially has the same message "Still in progress".

Then later when an event occurs it has to update the ItemStatus for a specific Item Data in CollectionView with new message "Completed !"

The event is just a regular C# method with a timer in it. After 2 minutes it has to updates one ItemStatus property and changes its message to "Completed".

I tried to update ItemStatus from OnPropertyChanged of INotifyPropertyChanged but it updates all the ItemStatus for each Item data with the same value. I know it's normal behaviour because ItemStatus property name find itself within each Item data.

I also tried to use x:Name for ItemStatus Label but it doesn't work; and I read on Microsoft web site that DataTemplate creates a new scope for all the elements inside of it,

I was also thinking about creating dynamic elements but not sure if it's gonna work.

By the way, I want to dynamically only update ItemStatus for specific ItemId/Item Data,

I remember in HTML/CSS/Javascript there is kind of CLASS and ID element that you can access from javascript method anywhere in the page.

Please does anybody have an idea how to achieve it?

private string itemStatus = "Still in progress";

public string ItemStatus
{
    get => itemStatus;
    set
    {
        if (value == itemStatus)
            return;

        itemStatus = value;     
        OnPropertyChanged(nameof(ItemStatus));
    }
}


private void UpdateUIItemStatusMessage(string uniqueMessage)
{
    ItemStatus = $"Completed !!!";
}

Requested code by Jason

namespace WarehouseMobile
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ProductPage : ContentPage
    {
        private string itemStatusMessage = "Still in progress";

        public string ItemStatus
        {
            get => itemStatusMessage;
            set
            {
                if (value == itemStatusMessage)
                    return;

                itemStatusMessage = value;
                OnPropertyChanged(nameof(ItemStatus));
            }
        }

        private ObservableCollection<ProductDb> _products;
        public ObservableCollection<ProductDb> Products
        {
            get { return _products; }
            set
            {
                _products = value;
                OnPropertyChanged(nameof(Products));
            }
        }

        public ProductPage()
        {
            InitializeComponent();

            BindingContext = this;

            Products = new ObservableCollection<ProductDb>();
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();

            Products = new ObservableCollection<ProductDb>(data);
            myCollection.ItemsSource = Products;
        }
        
        private void UpdateUIItemStatusMessage(string itemId)
        {
            var myItems = myCollection.ItemsSource as ObservableCollection<ProductDb>;

            var selectedItem = myItems.FirstOrDefault(o => o.Id == 4);

            selectedItem.ItemStatus = $"NEW MESSAGE !!! - Completed";
        }
    }
}

public class ProductDb
    {
        [PrimaryKey, AutoIncrement]
        public int ItemId { get; set; }
        public string ItemDescription { get; set; }
        public string ItemStatus { get; set; }
    }

Answer 1

The event is not a problem so far, the main issue is to update ItemStatus for a specific ItemId with a specific value.

If you want to update the property of special item of the data list bind to CollectionView , you need to implement interface INotifyPropertyChanged for your item model(ProductDb.cs).

Secondly,it is recommended that you use MVVM to implement your function.

And I have achieved this function,you can refer to the following code:

ProductDb.cs

public class ProductDb: INotifyPropertyChanged 
    {
        public int ItemId { get; set; }
        public string ItemDescription { get; set; }
        // public string ItemStatus { get; set; }
        private string _itemStatus;
        public string ItemStatus
        {
            set { SetProperty(ref _itemStatus, value); }
            get { return _itemStatus; }
        }

        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

ProductViewModel.cs

public class ProductViewModel: INotifyPropertyChanged 
{
    //private string itemStatusMessage = "Still in progress";
    //public string ItemStatus
    //{
    //    get => itemStatusMessage;
    //    set
    //    {
    //        if (value == itemStatusMessage)
    //            return;

    //        itemStatusMessage = value;
    //        OnPropertyChanged(nameof(ItemStatus));
    //    }
    //}

    private ObservableCollection<ProductDb> _products;
    public ObservableCollection<ProductDb> Products
    {
        get { return _products; }
        set
        {
            _products = value;
            OnPropertyChanged(nameof(Products));
        }
    }


    public ProductViewModel() {
        Products = new ObservableCollection<ProductDb>();

        Products.Add(new ProductDb { ItemId = 01, ItemDescription = "ItemDescription 1",ItemStatus = "Still in progress" });
        Products.Add(new ProductDb { ItemId = 02, ItemDescription = "ItemDescription 2", ItemStatus = "Still in progress" });
        Products.Add(new ProductDb { ItemId = 03, ItemDescription = "ItemDescription 3", ItemStatus = "Still in progress" });
        Products.Add(new ProductDb { ItemId = 04, ItemDescription = "ItemDescription 4", ItemStatus = "Still in progress" });
        Products.Add(new ProductDb { ItemId = 05, ItemDescription = "ItemDescription 5", ItemStatus = "Still in progress" });

    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;
        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;

}

ProductPage.xaml.cs

public partial class ProductPage : ContentPage 
    {
        public ProductPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            ProductViewModel viewmodel = this.BindingContext as ProductViewModel;

            var selectedItem = viewmodel.Products.FirstOrDefault(o => o.ItemId == 04);

            selectedItem.ItemStatus = $"NEW MESSAGE !!! - Completed";
        }
    }

ProductPage.xaml

<?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:formsecondapp="clr-namespace:FormSecondApp"
             x:Class="FormSecondApp.ProductPage">

    <ContentPage.BindingContext>
        <formsecondapp:ProductViewModel></formsecondapp:ProductViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>

            <Button  Text="update status" Clicked="Button_Clicked"/>
            <CollectionView ItemsSource="{Binding Products}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Label Text="{Binding ItemStatus}" />
                            <Label Text="{Binding ItemId}" />
                            <Label Text="{Binding ItemDescription}" />
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            
        </StackLayout>
    </ContentPage.Content>
</ContentPage>