RSS Feed

Activity Tracker –WPF Auto Updated Data Binding with INotifyPropertyChanged

After styling and Data binding time has come for the logic implementation. I need a simple counter with a timer. At first I tried to use the Timer class which has an Elapsed event but there were some problems with DataBinding, so I have decided to create my own thread with a one second sleep time. Its main purpose is to increment the counter.

In order to create a better logic, I have decided to create a new class TaskWPF. It wraps the Task class which is used as a simple data container. TaskWPF includes logic used by the Wpf DataBinding mechanism. Task class is used also in other projects, so I have decided to split it.  TaskWPF implements the INotifyPropertyChanged interface. It is needed to implement automatic data binding updates.

Auto Updated Data Binding:

Each second value on TimeSpent is incremented. I want to track this time in real-time. In order to do that we have to redraw the TextBlock. By using the DataBinding, we can do this process automatically every time the bound data is changed. This option is not default. We have to set up few options.

1) First our class which contains bound properties needs to implement the INotifyPropertyChanged interface. We have to implement the method OnPropertyChanged and call it every time we are changing the property which we want to auto update. This call will notify the bound WPF control, in my example TextBlock, that the value has changed and this will force the TextBlock to redraw itself with a new value.

1 public class TaskWPF : INotifyPropertyChanged 2 { 3 .... 4 public void Increment() 5 { 6 AddSecond(1); 7 OnPropertyChanged("TimeSpentString"); 8 } 9 .... 10 #region INotifyPropertyChanged Members 11 12 public event PropertyChangedEventHandler PropertyChanged; 13 14 protected void OnPropertyChanged(string name) 15 { 16 PropertyChangedEventHandler handler = PropertyChanged; 17 if (handler != null) 18 { 19 handler(this, new PropertyChangedEventArgs(name)); 20 } 21 } 22 23 #endregion 24 .... 25 }
 As you can see every time I am calling the increment method I am m also calling the OnPropertyChanged function.  This one notifies the TextBlock that the property has changed.

2) We have to tell the TextBlock to watch out for property updates. There is a special property UpdateSourceTrigger in the Binding segment that specifies how the Binding will behave. . On default, it is set on LostFocus option which updates bound value every time the control losses focus.  In order to auto update on property changed, we have to set it on “PropertyChanged“ option.

1 <HierarchicalDataTemplate x:Key="TaskTemplate" ItemsSource="{Binding Childrens}" DataType="{x:Type data:TaskWPF}" > 2 ... 3 <TextBlock Name="TimeSpent" Text="{Binding Path=TimeSpentString Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/> 4 .... 5  </HierarchicalDataTemplate>

Same technique is used for time estimated limit notification. Right now I have made a simple border which is changing the color when the time spent is greater than estimated time.

image image

Background color of the Border is bound to the property in TaskWPF class.

1 public void IsOverEstimatedTime() 2 { 3 if (_task.TimeSpent > _task.TimeEstimate) 4 { 5 TaskColor = "Red"; 6 OnPropertyChanged("TaskColor"); 7 } 8 }


Every time I am incrementing the counter. I am also checking if the time spent is greater than time estimated. When this is its true color name is changed,  and the OnPropertyChanged method is called. It notifies the Border by the Binding to redraw itself because the value has changed. One important thing to note. Color is specified by a string name because Background property in the Xaml doesn't accept a Color" class.

Next Chapter. Communication with Xml files and TODO List.
Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s