Xamarin.Forms How to change UI label text inside DataTemplate - xamarin

Question

This piece of code is displaying a few rows of icon and text that looks like a simple menu. The code below is perfectly working. But there are times I need to change one or more of the labels' text.
.xaml
<Frame HorizontalOptions="End" VerticalOptions="Start" BackgroundColor="Black" CornerRadius="5" >
<StackLayout Margin="0" Spacing="15" BindableLayout.ItemsSource="{Binding StockItemCollection}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Spacing="20">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</StackLayout.GestureRecognizers>
<Image Source="{Binding StockItemIcon}" WidthRequest="15" HeightRequest="15" BackgroundColor="Transparent"
VerticalOptions="Center" HorizontalOptions="Start"/>
<Label Text="{Binding StockItemTitle}" TextColor="White" FontSize="16" FontAttributes="Bold"
HorizontalOptions="Start" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Frame>
The code behind...
public MainPage()
{
InitializeComponent();
.
.
.
LoadStock();
this.BindingContext = this;
}
public ObservableCollection<StockItem> StockItemCollection { get; set; }
private void LoadStock()
{
StockItemCollection = new ObservableCollection<StockItem>
{
new StockItem { StockItemTitle = "ItemTitle 0", StockItemIcon = "Item0.png" },
new StockItem { StockItemTitle = "ItemTitle 1", StockItemIcon = "Item1.png" },
new StockItem { StockItemTitle = "ItemTitle 2", StockItemIcon = "Item2.png" },
new StockItem { StockItemTitle = "ItemTitle 3", StockItemIcon = "Item3.png" },
new StockItem { StockItemTitle = "ItemTitle 4", StockItemIcon = "Item4.png" },
new StockItem { StockItemTitle = "ItemTitle 5", StockItemIcon = "Item5.png" }
};
}
public class StockItem
{
public string StockItemTitle { get; set; }
public string StockItemIcon { get; set; }
}
... Testing Get & Set...
Device.BeginInvokeOnMainThread(() =>
{
.
.
.
string before_StockItem = StockItemCollection[4].StockItemTitle;
// before_StockItem = "ItemTitle 4"
.
StockItemCollection[4].StockItemTitle = "Item 4 title Edited";
.
string after_StockItem = StockItemCollection[4].StockItemTitle;
// after_StockItem = "Item 4 title Edited"
// Problem: value updated here but NOT the label in the UI
});
This is where the problem is. The updated value is Not updated in the UI.
Anyone help please. Thanks

Answer 1

This is where the problem is. The updated value is Not updated in the UI.
As Jason said, to update the view at runtime, please make the model class implement the INotifyPropertyChanged interface to trigger the PropertyChanged. Check the tutorial.
Try the code like below:
public class CustomModel : INotifyPropertyChanged
{
private string content;
public string Content
{
get
{
return content;
}
set
{
if (content != value)
{
content = value;
NotifyPropertyChanged();
}
}
}
protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
Here is the running gif:

Answer 2

I tried earlier by implementing INotifyPropertyChanged , but did it wrongly that caused PropertyChanged not firing. Thank you to Jason for making me try it again and finally got it done correctly.
So I think I should answer my own question here and I hope it will also help others.
Ref: https://learn.microsoft.com/en-us/dotnet/desktop/winforms/how-to-implement-the-inotifypropertychanged-interface?view=netframeworkdesktop-4.8
Implementing INotifyPropertyChangedby changing this
public class StockItem
{
public string StockItemTitle { get; set; }
public string StockItemIcon { get; set; }
}
to this...
public class StockItem : INotifyPropertyChanged
{
private string _stockItemTitle = string.Empty;
public string StockItemIcon { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public string StockItemTitle
{
get
{
return this._stockItemTitle;
}
set
{
if (value != this._stockItemTitle)
{
this._stockItemTitle = value;
NotifyPropertyChanged();
}
}
}
}