I am making a fitness app so I need a timer.I have done this in code-behind:
public partial class Timer : ContentView
{
private int seconds = 30;
private System.Timers.Timer timer;
public Timer()
{
InitializeComponent();
timer = new System.Timers.Timer();
timer.Interval = 1000;
timer.AutoReset = true;
timer.Elapsed += new System.Timers.ElapsedEventHandler(OneSecondPassed);
timer.Enabled = true;
}
private void OneSecondPassed(object source, System.Timers.ElapsedEventArgs e)
{
seconds--;
}
public string Time
{
get => seconds.ToString();
}
}
And then for the UI, I made a label and bound its text property to my Time property:
<Label BindingContext ="{x:Reference this}"
Text="{Binding Time}"/>
//"this" is a reference to my class
When I start the app, the timer remains 30. I know that "seconds" is for sure decreasing, so there must be a problem with the binding.I know I could've just updated the text property of the label inside OneSecondPassed , but I'd like to learn more about data binding.Help?
As Jason said, implementing the INotifyPropertyChanged interface is a good choice.
For your better understanding, I wrote a runnable project that meets your requirements for your reference.
Here is the xaml code:
<StackLayout>
<Label Text="{Binding DateTime}"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</StackLayout>
Here is the cs code:
public partial class MainPage : ContentPage, INotifyPropertyChanged
{
int dateTime;
public event PropertyChangedEventHandler PropertyChanged;
public MainPage()
{
InitializeComponent();
this.DateTime = 30;
Device.StartTimer(TimeSpan.FromSeconds(1), () =>
{
if (DateTime > 0)
{
DateTime--;
}
return true;
});
BindingContext = this;
}
public int DateTime
{
set
{
if (dateTime != value)
{
dateTime = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("DateTime"));
}
}
}
get
{
return dateTime;
}
}
}
Related
I am absolute beginner in WPF and C#.
I am trying to populate the textbox with a counter after reading about INotifyPropertyChanged.
Below is my code:
namespace DataBinding
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
///
//https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-implement-property-change-notification?view=netframeworkdesktop-4.8
public class OPCUAData : INotifyPropertyChanged
{
private string m_text;
private int m_int;
public event PropertyChangedEventHandler PropertyChanged;
public OPCUAData()
{ }
public OPCUAData(string str, int i)
{
this.m_text = str;
this.m_int = i;
}
public string OPCUAtext
{
get { return m_text; }
set
{
if (value != m_text)
{
m_text = value;
OnPropertyChanged();
}
}
}
public int OPCUAint
{
get { return m_int; }
set
{
if (value != m_int)
{
m_int = value;
OnPropertyChanged();
}
}
}
// Create the OnPropertyChanged method to raise the event
// The calling member's name will be used as the parameter.
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
public partial class MainWindow : Window
{
static OPCUAData opc = new OPCUAData("", 5);
public MainWindow()
{
InitializeComponent();
Thread thread = new Thread(incrementData);
thread.Start();
}
void incrementData()
{
Stopwatch timer = new Stopwatch();
timer.Start();
while (timer.Elapsed.TotalSeconds < 10)
{
opc.OPCUAint = opc.OPCUAint + 1;
}
timer.Stop();
}
}
}
I am expecting my variable opc.OPCUAint to be displayed in the textbox but it is not. Please help about what I am missing here.
Below is the xml.
<Window x:Class="DataBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DataBinding"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<TextBox Text="{Binding ElementName=opc, Path= OPCUAint }" Margin="91,56,454.6,286"></TextBox>
</Grid>
</Window>
Set the DataContext of your window:
public MainWindow()
{
InitializeComponent();
DataContext = opc; // <--
Thread thread = new Thread(incrementData);
thread.Start();
}
...and bind directly to a property of it:
<TextBox Text="{Binding OPCUAint}" />
If you want to update the UI from a background thread, you should run the code in Application's dispatcher
Application.Current.Dispatcher.Invoke(() => opc.OPCUAint = opc.OPCUAint + 1);
You use a StopWatch to measure time.
You use a timer to execute an operation periodically.
For example use Timer to execute the operation on a background thread or use DispatcherTimer to execute the operation on the UI thread.
public void StartTimer()
{
// The callback will automatically execute on a background tread.
// Note that Timer implements IDisposable
var timer = new Timer(PeriodicOperation);
// Start the timer.
timer.Change(TimeSpan.Zero, TimeSpan.FromSeconds(1));
}
private void PeriodicOperation(object state)
{
opc.OPCUAint++;
}
If incrementing is the only operation, or you don't execute CPU intensive code in general, don't create a dedicated thread. It will make the performance unnecessarily bad. In this case, and in case of your posted example, use the mentioned DispatcherTimer:
public void StartTimer()
{
dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Tick += PeriodicOperation;
dispatcherTimer.Interval = TimeSpan.Fromseconds(1);
dispatcherTimer.Start();
}
private void PeriodicOperation(object sender, EventArgs e)
{
opc.OPCUAint++;
}
Then finally to make it work, you must assign the OPCUAData instance to the DataContext of the MainWindow. Avoid defining public static fields or properties:
private OPCUAData OPCUAData { get; }
public MainWindow()
{
InitializeComponent();
this.OPCUAData = new OPCUAData("", 5);
this.DataContext = this.OPCUAData;
StartTimer();
}
public void StartTimer()
{
dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Tick += PeriodicOperation;
dispatcherTimer.Interval = TimeSpan.Fromseconds(1);
dispatcherTimer.Start();
}
private void PeriodicOperation(object sender, EventArgs e)
{
this.OPCUAData.OPCUAint++;
}
And bind directly to the DataContext:
<Window>
<TextBox Text="{Binding OPCUAint}" />
</Window>
So I've done this in code:
public partial class Timer : ContentView , INotifyPropertyChanged
{
private int seconds = 30;
private System.Timers.Timer timer;
public Timer()
{
InitializeComponent();
timer = new System.Timers.Timer();
timer.Interval = 1000;
timer.AutoReset = true;
timer.Elapsed += new System.Timers.ElapsedEventHandler(OneSecondPassed);
timer.Enabled = true;
}
private void OneSecondPassed(object source, System.Timers.ElapsedEventArgs e)
{
seconds--;
Time = seconds.ToString();
}
public event PropertyChangedEventHandler PropertyChanged;
public string Time
{
get => seconds.ToString();
set
{
Time = value;
if (PropertyChanged != null)
{
PropertyChanged(this , new PropertyChangedEventArgs("Time"));
}
}
}
}
and then bound my label's text to it in XAML:
<Label BindingContext ="{x:Reference this}"
Text="{Binding Time}"/>
When I start the app, it crashes...I don't really understand how PropertyChanged works, just that INotifyPropertyChanged implements it.Also, when I declare PropertyChanged, it tells me that BindableObject.PropertyChanged already exists, use new in order to hide it.If you could explain how the interface and its event works, I'd be really thankful.
your setter is creating an infinite loop.
set
{
// this will call the setter again, infinitely
Time = value;
...
}
you already have a private variable for seconds, you should use it here
public int Time
{
get => seconds;
set
{
seconds = value;
if (PropertyChanged != null)
{
PropertyChanged(this , new PropertyChangedEventArgs("Time"));
}
}
}
private void OneSecondPassed(object source, System.Timers.ElapsedEventArgs e)
{
Time--;
}
when I declare PropertyChanged, it tells me that BindableObject.PropertyChanged already exists
I see that Timer inherits from ContentView.
ContentView is a BindableObject, so it already implements everything used in binding, such as PropertyChanged. Delete your declaration of PropertyChanged.
OPTIONAL: You could also remove , INotifyPropertyChanged - ContentView does that for you. However it is harmless to leave it there.
I'm trying to learn the MVVM structure. How can I update a variable that changes constantly in another class in the UI.
I created a simple example because the project codes are too much. But I failed.
I would be very grateful if you could tell me where I went wrong. Thanks.
MyModel
public class Temperature : INotifyPropertyChanged
{
private double _memsTemperature;
private double _cpuTemperature;
private double _animalTemperature;
public double MemsTemperature
{
get { return _memsTemperature; }
set
{
_memsTemperature = value;
OnPropertyChanged("MemsTemperature");
}
}
public double CpuTemperature
{
get { return _cpuTemperature; }
set
{
_cpuTemperature = value;
OnPropertyChanged("CpuTemperature");
}
}
public double AnimalTemperature
{
get { return _animalTemperature; }
set
{
_animalTemperature = value;
OnPropertyChanged("AnimalTemperature");
}
}
System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
public Temperature()
{
dispatcherTimer.Tick += DispatcherTimer_Tick;
dispatcherTimer.Interval = TimeSpan.FromSeconds(1);
dispatcherTimer.Start();
}
private void DispatcherTimer_Tick(object sender, System.EventArgs e)
{
MemsTemperature = MemsTemperature + 1;
CpuTemperature = CpuTemperature + 2;
AnimalTemperature = AnimalTemperature + 3;
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
}
MainWindowViewModel
public class MainWindowViewModel
{
public double MemTemp { get; set; }
public MainWindowViewModel()
{
MemTemp = new Temperature().MemsTemperature;
}
}
Main Window Xaml and C# Code
<TextBlock Text="{Binding MemTemp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel();
}
The MainWindowViewModel should expose a Temperature property, e.g. like this:
public class MainWindowViewModel
{
public Temperature Temperature { get; } = new Temperature();
}
and the Binding should then look like this:
<TextBlock Text="{Binding Temperature.MemsTemperature}"/>
Neither Mode=TwoWay nor UpdateSourceTrigger=PropertyChanged makes sense on the Binding of a TextBlock's Text property.
The OnPropertyChanged method would simpler and safer be implemented like this:
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
You have a XAML page with UI controls that bind to those constantly-changing properties. When you send out the PropertyChanged notifications, the UI control will automatically update itself.
The problem with the code you wrote is that you never bound to the actual temperature. XAML doesn't know how to translate MemTemp into anything other than it's name unless you write a DataTemplate for it.
For example, (assuming a grid) something like this:
<TextBlock Grid.Row="0" Grid.Column="0" Text="Animal: "/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding MemTemp.AnimalTemperature}"/>
I would define an explicit worker class which performs the measurements. This class
has an event (OnMeasurement), which can be subscribed in the ViewModel:
// Arguments for the mesurement event (temperature, ...)
public class MeasurementEventArgs : EventArgs
{
public double Temperature { get; }
public MeasurementEventArgs(double temperature)
{
Temperature = temperature;
}
}
public class MeasurementWorker
{
private readonly CancellationTokenSource _tcs = new CancellationTokenSource();
// Provides an event we can subscribe in the view model.
public event Action<object, MeasurementEventArgs> OnMeasurement;
public void Stop()
{
_tcs.Cancel();
}
// Measurement routine. Perform a measurement every second.
public async Task Start()
{
try
{
var rnd = new Random();
while (!_tcs.IsCancellationRequested)
{
var temperature = 20 * rnd.NextDouble();
OnMeasurement?.Invoke(this, new MeasurementEventArgs(temperature));
await Task.Delay(1000, _tcs.Token);
}
}
catch (TaskCanceledException) { }
// TODO: Create an error event to catch exceptions from here.
catch { }
}
}
In your MainWindow class you instantiate your viewmodel and your worker:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainWindowViewModel(new MeasurementWorker());
}
// Register in XAML with <Window ... Closing="StopMeasurement">
public async void StopMeasurement(object sender, System.ComponentModel.CancelEventArgs e)
{
var vm = DataContext as MainWindowViewModel;
await vm.StopMeasurement();
}
}
In your view model you can subscribe to the worker event and raise OnPropertyChanged in your callback function:
public class MainWindowViewModel : INotifyPropertyChanged
{
private double _memsTemperature;
private readonly MeasurementWorker _mw;
private readonly Task _measurementWorkerTask;
public double MemsTemperature
{
get => _memsTemperature;
set
{
_memsTemperature = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(MemsTemperature)));
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void ProcessMeasurement(object sender, MeasurementEventArgs args)
{
MemsTemperature = args.Temperature;
}
// You can call this if you want to stop your measurement. Should be called if you close your app.
public async Task StopMeasurement()
{
_mw.OnMeasurement -= ProcessMeasurement;
_mw.Stop();
// Clean shutdown
await _measurementWorkerTask;
}
public MainWindowViewModel(MeasurementWorker mw)
{
_mw = mw;
_mw.OnMeasurement += ProcessMeasurement;
_measurementWorkerTask = _mw.Start();
}
}
I am trying to start by looking at a simple clock example.
i am wondering how to I convert a normal clock to MVVM.
Can someone help?
Thanks.
private void startClock()
{
currentTime = DateTime.Now;
DispatcherTimer clocktimer = new DispatcherTimer();
clocktimer.Interval = TimeSpan.FromSeconds(1);
clocktimer.Tick += Clocktimer_Tick;
clocktimer.Start();
}
private void Clocktimer_Tick(object sender, object e)
{
currentTime = DateTime.Now;
updateTimeDisplay(currentTime);
}
private void updateTimeDisplay(DateTime time)
{
Time.Text = time.ToString(#"HH\:mm");
Sec.Text = time.ToString(#"ss");
Date.Text = time.ToString(#"ddd dd-MM-yyyy");
}
Update
I can't post more codes as the system flagged and unable to post.
UWP C# MVVM clock example
You could make string property in the viewmode and bind it with your textblock in the xaml. When you update the this property, it will notify ui update.
For example:
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ViewModel()
{
startClock();
}
private DateTime _currentTime;
private void startClock()
{
_currentTime = DateTime.Now;
DispatcherTimer clocktimer = new DispatcherTimer();
clocktimer.Interval = TimeSpan.FromSeconds(1);
clocktimer.Tick += Clocktimer_Tick;
clocktimer.Start();
}
private void Clocktimer_Tick(object sender, object e)
{
_currentTime = DateTime.Now;
updateTimeDisplay(_currentTime);
}
private void updateTimeDisplay(DateTime time)
{
Time = time.ToString(#"HH:mm:ss");
}
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
// Raise the PropertyChanged event, passing the name of the property whose value has changed.
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private string _time;
public string Time
{
get
{
return _time;
}
set
{
_time = value;
this.OnPropertyChanged();
}
}
}
Xaml code
<Page.DataContext>
<local:ViewModel />
</Page.DataContext>
<Grid>
<TextBlock
x:Name="Time"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="25"
Text="{Binding Time}"
TextAlignment="Center" />
</Grid>
For detail mvvm design, please refer data binding in depth document.
View model will be something like this:
public class ClockViewModel : ViewModelBase
{
public ClockViewModel()
{
var _ = UpdateCurrentDateTimeAsync();
}
public DateTime? CurrentDateTime { get; private set; }
private async Task UpdateCurrentDateTimeAsync()
{
while (true)
{
CurrentDateTime = DateTime.Now;
OnPropertyChanged(nameof(CurrentDateTime));
await Task.Delay(1000);
}
}
}
Just set it as the DataContext of your view and bind some visual (e.g. TextBox) to CurrentDateTime property. ViewModelBase is a very basic INotifyPropertyChanged implementation.
I'm fairly new to C# and to programming in general.
In a previous question "C# Reset a countdown timer-DispatcherTimer-" I got help to reset my timer. Then I tried to make my code more elegant and tried to create a separate class for the timer and update the countdown text block through databinding instead of hardcoding the text property in this line in timer_Tick():
Countdown.Text = (int)(duration - sw.Elapsed).TotalSeconds + " second(s)
My problem is that the binding fails. I still struggle with MVVM. Here is my code:
CountDownTimer.cs
class CountDownTimer : DispatcherTimer
{
public System.Diagnostics.Stopwatch sw { get; set; }
static readonly TimeSpan duration = TimeSpan.FromSeconds(60);
private int _seconds;
public int Seconds
{
get { return _seconds; }
set { _seconds = value; NotifyPropertyChanged("Seconds"); }
}
private string _timeElapsed;
public string TimeElapsed
{
get { return _timeElapsed; }
set { _timeElapsed = value; NotifyPropertyChanged("TimeElapsed"); }
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public void timer_Tick(object sender, object e)
{
if (sw.Elapsed <= duration)
{
Seconds = (int)(duration - sw.Elapsed).TotalSeconds;
TimeElapsed = String.Format("{0} second(s)", Seconds);
}
else
{
TimeElapsed = "Times Up";
this.Stop();
}
}
}
EquationView.xaml
<StackPanel x:Name="timePanel" Orientation="Horizontal" Visibility="Collapsed">
<TextBlock Text="Time Left: " Height="auto"
Margin="20,10,5,10" FontSize="26"/>
<TextBlock x:Name="countdown" Text="{Binding TimeElapsed}"
Margin="20,10,20,10" Width="200"
Height="auto" FontSize="26"/>
</StackPanel>
EquationView.xaml.cs
public sealed partial class EquationView : Page
{
//code
private void startButton_Click(object sender, RoutedEventArgs e)
{
//more code
// If level == difficult enable timer
if (Level == PlayerModel.LevelEnum.Difficult)
{
// timer commands
timer.sw = System.Diagnostics.Stopwatch.StartNew();
timer.Interval = new TimeSpan(0, 0, 0, 1);
timer.Tick += timer.timer_Tick;
timer.Start();
countdown.DataContext = timer;
//more code
} //end of method
// much more code
} //end of class EquationView
I inserted the line countdown.Text = timer.TimeElapsed; to try to figure out what was off and it gave me a System.NullReferenceException. Then I changed it to timer.Seconds.ToString() the first time it showed 0 but after that it returns 56 or 57.
p.s. I retyped the property changed method from my BindableBase class because I don't want to deal with multiple inheritance right now.
I changed the countdown timer seeing this question: How do I display changing time within a TextBlock?. I'd seen before I started building the timer but it helped me more now.
CountDownTimer.cs
public class CountDownTimer : BindableBase
{
System.Diagnostics.Stopwatch sw;
static readonly TimeSpan duration = TimeSpan.FromSeconds(60);
private DispatcherTimer timer;
public CountDownTimer()
{
timer = new DispatcherTimer();
sw = System.Diagnostics.Stopwatch.StartNew();
timer.Interval = new TimeSpan(0, 0, 0, 1);
timer.Tick += timer_Tick;
}
private int? _seconds;
public int? Seconds
{
get { return _seconds; }
set { _seconds = value; NotifyPropertyChanged("Seconds"); }
}
private string _timeElapsed;
public string TimeElapsed
{
get { return _timeElapsed; }
set { _timeElapsed = value; NotifyPropertyChanged("TimeElapsed"); }
}
public void timer_Tick(object sender, object e)
{
if (sw.Elapsed < duration)
{
Seconds = (int)(duration - sw.Elapsed).TotalSeconds;
TimeElapsed = String.Format("{0} second(s)", Seconds);
}
else
{
TimeElapsed = "Times Up";
timer.Stop();
}
}
public void StartCountDown()
{
sw.Start();
timer.Start();
}
public void StopCountDown()
{
timer.Stop();
sw.Stop();
}
}