Xamarin forms: string binding isn't updating in. the view when property is set inside a timer method. why no work?

Trying to constantly update a string in a view. using MVVM so have set up my view model and set up a timer to constantly update the string with the current time.

timer is in the constructor of the view model and the constructor is called in the constructor of the code-behind for the view.

for some reason any time i set the string property within the method in the timer it doesn't update the view? I have a console write line within the timer method that works as expected. Why isn't the view getting the updated string ?

View Model

public class MainViewModel
	{

        //
        TimeIntervals Interval = TimeIntervals.Seconds;

        int DurationOfInterval = 1;

        

        public MainViewModel()
		{
            
            TimeLeft = "2023.5.18";

            DateTime LastRecordedTime = DateTime.MinValue;

            Device.StartTimer(TimeSpan.FromSeconds(3), () =>
            { 

                
                DateTime CurrentTime = DateTime.Now;

                Console.WriteLine($"time has passed {LastRecordedTime.ToString("dd/MM/yyyy |HH:mm:ss")}");

                       
                TimeLeft = CurrentTime.ToString();

                return true;



            });

        }

        string timeLeft;

        public string TimeLeft
        {
            set { SetProperty(ref timeLeft, value); }
            get { return timeLeft; }
        }
       
        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;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string PropertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
        }

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:local="clr-namespace:DeathClock.Main"
             x:Class="DeathClock.MainPage">

    <ContentPage.BindingContext>
        <local:MainViewModel/>

    </ContentPage.BindingContext>

    <StackLayout Background="black">
        <Grid ColumnDefinitions="3*,1*" BackgroundColor="Black" >
            <Grid Grid.Column="0" RowDefinitions = "2*,400,1*"  Padding="5" >
                <Grid Grid.Column="0" ColumnDefinitions="50,200" >
                    <Button Grid.Column="0" Text="Config" Command="{Binding goToSettings}"/>

                </Grid>
            
                <Grid  Grid.Row="1" Grid.Column="0" RowDefinitions="2*,2*" ColumnDefinitions="2*,2*,2*"  Padding="5">
                    <Label Grid.Column="0" Grid.Row="0" VerticalOptions="CenterAndExpand" FontSize="Title" Text="{Binding TimeSpent}" BackgroundColor="Purple"/>
                    <Label Grid.Column="0" Grid.Row="1" VerticalOptions="CenterAndExpand" FontSize="Title" Text="{Binding TimeLeft}" BackgroundColor="Purple"/>

                
                </Grid>
                
            



            </Grid>
            <StackLayout Grid.Column="1" Rotation="-90" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" ScaleX="5" Background="black" >
                    
                    <ProgressBar ProgressColor="Bisque" Progress="{Binding LifeProgress}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ScaleY="20" ></ProgressBar>

            </StackLayout>
        </Grid>
    </StackLayout>

</ContentPage>

Code Behind

public partial class MainPage : ContentPage
    {
       

       
        public MainPage()
        {
            InitializeComponent();
            MainViewModel ViewModel = new MainViewModel();



        }

        
      
    }

> still interesting how the view updated outside the timer without
> implementing INotifyPropertyChanged.

For this, you also need to implement interface INotifyPropertyChanged for your view model.

From official document ViewModels and Property-Change Notifications,we could find that:

> The ViewModel is the data-binding source. The ViewModel does not
> define bindable properties, but it does implement a notification
> mechanism that allows the binding infrastructure to be notified when
> the value of a property changes. This notification mechanism is the
> INotifyPropertyChanged interface, which defines a single event named
> PropertyChanged. A class that implements this interface generally
> fires the event when one of its public properties changes value.

So, you need to implement interface INotifyPropertyChanged and call function OnPropertyChanged for the properties that you want to update the UI automatically while changing the value of these properties.

For example:

        public string TimeLeft
    {
        set { SetProperty(ref timeLeft, value); }
        get { return timeLeft; }
    }

    string timeSpent;
    public string TimeSpent
    {
        set { SetProperty(ref timeSpent, value); }
        get { return timeSpent; }
    }

Besides,you can change the value of the property at any time according to your needs, and as long as you implement interface INotifyPropertyChanged for your view model and call OnPropertyChanged for your property, the UI will be automatically updated.

Based on your code,I added a command to the viewmodel and bind to the button to change the value of property TimeLeft and TimeSpent,then the UI will update itself.

  public ICommand UpdateCommand { get; set; }

  UpdateCommand = new Command(updateTimeMethod);

method updateTimeMethod

private void updateTimeMethod(object obj)
{
    TimeLeft = "2023.5.21";

    TimeSpent = "TimeSpent 2";
}

You can refer to the whole code here:

public class MainViewModel: INotifyPropertyChanged 
{
   // TimeIntervals Interval = TimeIntervals.Seconds;

    int DurationOfInterval = 1;

    public ICommand UpdateCommand { get; set; }

    public MainViewModel()
    {

        TimeLeft = "2023.5.18";

        TimeSpent = "TimeSpent 1";

        DateTime LastRecordedTime = DateTime.MinValue;

        Device.StartTimer(TimeSpan.FromSeconds(3), () =>
        {
            DateTime CurrentTime = DateTime.Now;

            Console.WriteLine($"time has passed {LastRecordedTime.ToString("dd/MM/yyyy |HH:mm:ss")}");


            TimeLeft = CurrentTime.ToString();

            return true;
        });

        UpdateCommand = new Command(updateTimeMethod);
    }

    private void updateTimeMethod(object obj)
    {
        TimeLeft = "2023.5.21";

        TimeSpent = "TimeSpent 2";
    }

    string timeLeft;

    public string TimeLeft
    {
        set { SetProperty(ref timeLeft, value); }
        get { return timeLeft; }
    }

    string timeSpent;
    public string TimeSpent
    {
        set { SetProperty(ref timeSpent, value); }
        get { return timeSpent; }
    }

    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;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string PropertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(PropertyName));
    }
}

MainPage.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:mvvmapp521="clr-namespace:MvvMApp521"
             x:Class="MvvMApp521.MainPage">

    <ContentPage.BindingContext>
        <mvvmapp521:MainViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Background="black">
        <Label  VerticalOptions="CenterAndExpand" FontSize="Title" Text="{Binding TimeSpent}" BackgroundColor="Purple"/>
        <Label  VerticalOptions="CenterAndExpand" FontSize="Title" Text="{Binding TimeLeft}" BackgroundColor="Purple"/>

        <Button   Text="reset value" HorizontalOptions="FillAndExpand" HeightRequest="50"    Command="{Binding UpdateCommand}"/>
    </StackLayout>

</ContentPage>

Note:

Since you have set the MainViewModel for the page on Yourpage.xaml, you don't need to set it again on the Yourpage.xaml.cs, so please remove the code :

public partial class MainPage : ContentPage
{             
    public MainPage()
    {
        InitializeComponent();

        // comment out the following code here
        // MainViewModel ViewModel = new MainViewModel();
    }   
}