V 1.0 Programming III. Automatic notifications with data binding (…Changed, INofityPropertyChanged, ObservableCollection, DataTemplate) Data formatters

V 1.0ÓE-NIK, 2014 Automatic notifications with data binding For the data binding to work, the target has to be notified that the source property has changed –If the source objects are built-in classes or UI elements, then usually this is pre-implemented (e.g. Slider.Value  Label.Content) –We need no such mechanisms if the ViewModel class (the DataContext) does not change (from the code) after the data binding The UI element did in fact change the ViewModel, but we did not changed the Viewmodel from the code If we use our own classes as source objects, then the target UI element will not be notified if the source property changes! 2

V 1.0ÓE-NIK, 2014 Example Aim: the Person class will be our DataContext, the Label displays the name, and the button will change the name Data binding in the XAML: 3 public MainWindow() { InitializeComponent(); currentPerson = new Person("Piros Péter"); this.DataContext = currentPerson; }

V 1.0ÓE-NIK, 2014 Example The event handler for the button’s Click event: The console will display the new name… … but the UI will still show the old name! 4 private void Button_Click(object sender, RoutedEventArgs e) { currentPerson.Name = "Kék Péter"; Console.WriteLine(currentPerson.Name); }

V 1.0ÓE-NIK, 2014 Automatic notifications with data binding Methods: 1.Dependency properties always emit a notification when they change – if our properties are dependency properties, their changes will be reflected in the UI (not required) 2.Raise the …Changed event when the property changes (separate events for the different properties) 3.Implement the INotifyPropertyChanged interface and use the PropertyChanged event when any property changes (one event for the whole class) 5

V 1.0ÓE-NIK, 2014 Automatic notification – …Changed event When a property changes, the xxxChanged event should be fired(xxx = the name of the property) The subscription for the event (by the target object) is automatic 6 public event EventHandler NameChanged; public string Name { get { return name; } set { name = value; EventHandler nameChanged = NameChanged; if (nameChanged != null) nameChanged(this, EventArgs.Empty); }

V 1.0ÓE-NIK, 2014 INotifyPropertyChanged The source class should implement the INotifyPropertyChanged interface (System.ComponentModel) It only contains one event: –public event PropertyChangedEventHandler PropertyChanged; This event should be fired if a property changes; the second parameter should be the name of the property –string.Empty or null, if all properties has changed 7 public string Name { get { return name; } set { name = value; PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(“Name")); }

V 1.0ÓE-NIK, 2014 INotifyPropertyChanged Advantage: no need for several events Usually we use it for more than one properties: OnPropertyChanged() 8 private void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); } public string Name { get { return name; } set { name = value; OnPropertyChanged("Name"); }

V 1.0ÓE-NIK, 2014 INotifyPropertyChanged OnPropertyChanged(), since.NET4.5 9 private void OnPropertyChanged([CallerMemberName] string propertyName="") { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); } public string Name { get { return name; } set { name = value; OnPropertyChanged(); }

V 1.0ÓE-NIK, 2014 Notifications – problems with collections If the source property is a collection, then the OnPropertyChanged() will only raise the event if the whole collection is replaced This will not detect: –If we exchange an element inside the collection –Add()/Remove()/Insert()… –If we change a property of an element inside the collection 10 public List NewsletterSubscriptions { get { return newsletterSubscriptions; } set { hirlevelFeliratkozasok = value; OnPropertyChanged("NewsletterSubscriptions"); //??? }

V 1.0ÓE-NIK, 2014 Notifications – problems with collections 11 List newList = new List (); newList.Add(new NewsletterSubscription("education", true)); currentPerson.NewsletterSubscriptions = newList; //good currentPerson.NewsletterSubscriptions[0] = new NewsletterSubscription("education", true); //not good currentPerson.NewsletterSubscriptions.Add( new NewsletterSubscription("education", true)); //not good currentPerson.NewsletterSubscriptions[0].Aktiv = false; //not good

V 1.0ÓE-NIK, 2014 Notifications – ObservableCollection Can be used just like List –System.Collections.ObjectModel Will send a notification: –If we exchange an element inside the collection –Add()/Remove()/Insert() –NOT if we change a property of an element inside the collection Implements the INotifyCollectionChanged interface 12 private ObservableCollection newsletterSubscriptions; public ObservableCollection NewsletterSubscriptions { get { return newsletterSubscriptions; } set { newsletterSubscriptions = value; OnPropertyChanged("NewsletterSubscriptions"); //??? }

V 1.0ÓE-NIK, 2014 Állapotértesítés – ObservableCollection 13 ObservableCollection newList = new ObservableCollection (); newList.Add(new NewsletterSubscription("education", true)); currentPerson.NewsletterSubscriptions = newList; //good currentPerson.NewsletterSubscriptions[0] = new NewsletterSubscription("education", true); //good currentPerson.NewsletterSubscriptions.Add( new NewsletterSubscription("education", true)); //good currentPerson.NewsletterSubscriptions[0].Aktiv = false; //not good

V 1.0ÓE-NIK, 2014 Notifications – unsolved problems Bindings and contents of ToString() values will never refresh… –If possible, avoid its usage! –Instead: in the Content, use a layout manager, and then multiple controls to display the individual properties (= several individual data bindings) –If we need the same layout for multiple ContentControls, then DataTemplate (ContentTemplate – not this semester) –If we are listing the elements in a ListBox control, then DataTemplate (ItemTemplate) or self-made control (not this semester) 14

V 1.0ÓE-NIK, 2014 Notifications – unsolved problems Changes in the property of a property –We assign/bind the main property to the DataContext of a layout manager/Template and then we bind the sub- properties to the individual UI elements –Or complex path (e.g.: {Binding Animal.WillBite}) –Or very often: self-made control… Changes in the property of an element in a collection –Usually DataTemplate (ItemTemplate) or custom control… For every suitable solution: –We have to implement the INotifyPropertyChanged interface in all classes in the binding –We have to use ObservableCollection 15

V 1.0ÓE-NIK, 2014 Changes in the properties of a property The container window’s DataContext is a person instance: 16 class Person : INotifyPropertyChanged { … private Animal pet; public Animal Pet { get { return per; } set { pet = value; OnPropertyChanged("Pet"); }

V 1.0ÓE-NIK, 2014 Changes in the property of an element in a collection 17 class Person : INotifyPropertyChanged { … private ObservableCollection newsletterSubscriptions; public ObservableCollection NewsletterSubscriptions { get { return newsletterSubscriptions; } set { newsletterSubscriptions = value; OnPropertyChanged("NewsletterSubscriptions"); } } //+NewsletterSubscription also implements } //the INotifyPropertyChanged interface

V 1.0ÓE-NIK, 2014 Data Formatters Sometimes the source property is not displayed directly, without modifications Formatters: –Easiest: …StringFormat properties ContentControl: ContentStringFormat property, it can only be used if the Content is a string ItemsControl: ItemStringFormat propery, it can only be used if the items are displayed as strings With data binding, if the target property is string (e.g. TextBox.Text), then within the {Binding} we can use the StringFormat –Its usage is similar as the string.Format formatter strings (special rules may apply) 18

V 1.0ÓE-NIK, 2014 Exercise HW: the assembled pizza should be saved into a ListBox HW: functionality to use a file to save/load the assembled pizzas 19