Databinding #3: binding directly to a Property with INotifyPropertyChanged

Hi,
this is the last part about databinding.
You can find the 1st part here and the 2nd part here. 
We saw how to bind UI controls on UI elements and on elements that belongs to a collection.
We noticed also that when an observable collection changes(if one item get added or removed), is changes also the UI elements in bind with the collection; the limit of observable collection is that if i change a property in a element inside it, it doesn't update it.
To do this update of property inside elements of a collection, we need to implement an interface, called INotifyPropertyChanged, that fires an event when the property changes, updating all the elements that are in bind with it.

Let's analyse an example:
i 2 tanks, and i have a collection of 2 liquid (liquid[0] and liquid[1]).
Liquid[0] is the content inside the 1st tank, liquid[1] is the content inside the 2nd tank.
I want to change the color (or state) of content changing the property inside the class, and i want that the UI updates the color when it changes of course.
Let's write the new class for the content:

class Liquid:System.ComponentModel.INotifyPropertyChanged
{
public string Name { get; private set; }

private SolidColorBrush liquidColor;
public SolidColorBrush LiquidColor { 
get
{
return liquidColor;
}
private set 
{ 
liquidColor = value; 
this.OnPropertyChanged("LiquidColor");
}
}

public Liquid(string name, Color color) 
{
this.Name = name;
this.LiquidColor = new SolidColorBrush(color);            
}

public void Change(SolidColorBrush newColor) 
{
this.LiquidColor = newColor; 
}

public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
}

This is the implementation if INotifyPropertyChanged.
In the bottom part there is the definition of the event that i throw, and inside the declaration of the property LiquidColor i throw the event every time that this the property changes.
Then i added a method Change, that changes the color with a new one.

Let's define a liquid collection:

class LiquidCollection:ObservableCollection

{

public LiquidCollection() 

{ 

this.Add(new Liquid("Liquid Silos 1", Colors.Aqua));

this.Add(new Liquid("Liquid Silos 2", Colors.Orange));

}

}

Datacontest:

public MainWindow()

{

InitializeComponent();



LiquidCollection liquids = new LiquidCollection();

ellipseSilos1.DataContext = liquids[0];

ellipseSilos2.DataContext = liquids[1];

}

and 2 button's callbacks that change colors to each silos:

private void btnChangeS1_Click(object sender, RoutedEventArgs e)

{

((Liquid)ellipseSilos1.DataContext).Change(colors[i]);

if (i < 10) i++; else i = 0;

}



private void btnChangeS2_Click(object sender, RoutedEventArgs e)

{

((Liquid)ellipseSilos2.DataContext).Change(colors[i]);

if (i < 10) i++; else i = 0;

}

UI Databinding now refers directly to the property that changes:

And we have the UI update when property changes inside the collection.


As usual the complete solution can be found here: 
http://www.mesta-automation.com/Downloads/Databinding3.rar

Next post i'll make a simple project in wpf where i connect an opc server to the UI through databinding.