WPF Short: ObservableCollection & INotifyPropertyChanged (2)

on

In my last post I explained the basics of databinding, but there’s still one issue which you’ll always have to fix when working with databinding,  being the UI not updating properly.

More precisely, there are two scenarios where you want your UI to be updated. One being when an item gets added to the collection, the other being when an item already added gets modified. Microsoft provides two interfaces to deal with those: INotifyCollectionChanged and INotifyPropertyChanged respectively. Add a Change and Add button on your form, and wire them up so they change/add an item in the collection of employees. You’ll see that without implementing these interfaces, the UI won’t update after clicking these buttons.

To make life easier WPF has the ObservableCollection, which automatically implements INotifyCollectionChanged. (Forget about Lists, and always use ObservableCollections!). I won’t cover INotifyCollectionChanged as it’s very similar to INotifyPropertyChanged (you can easily figure it out yourself) and I’ll use the ObservableCollection instead. Change our collection list to an Observable one right now.


ObservableCollection<Employee> EmployeeList = new ObservableCollection<Employee>();

The ObservableCollection is great when your app only needs to update UI when an item gets added/removed (e.g: static tweets in a  Twitter app). We want our app to update even when we modify an item in our collection, so we’ll be implementing our iNotifyPropertyChanged  in our data model, the Employee class. First the code, then the explanation:

The INotifyPropertyChanged interface basically adds an event to the Employee class. This event causes the UI to update and should be called whenever you change one of the properties of the class (in the Set accessor.). There’s no need to subscribe to the event, the UI does this automatically.

 public class Employee : INotifyPropertyChanged
 {
 string name;
 public string Name
 {
 get { return name; }
 set
 {
 if (name != value)
 name = value; OnPropertyChanged("Name");
 }
 }

Role role;
 public Role Role
 {
 get { return role; }
 set
 {
 if (role != value)
 role = value; OnPropertyChanged("Role");
 }
 }

public event PropertyChangedEventHandler PropertyChanged;

void OnPropertyChanged(string propertyName)
 {
 if (PropertyChanged != null)
 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
 }
 }

ImmersiveTip: snap Visual Studio and your browser window next to each other and rewrite the code yourself on this page while carefully analyzing the IntelliSense. Don’t just copy, that won’t get you anywhere.

When running it now, you’ll see your UI updating both when the collection gets modified and its children’s properties get modified. Again, this might be basic for some, but it’s an essential skill to master and it applies to both WPF, Silverlight and Windows 8 development.

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