Databinding #2 and ItemsTemplate: why we use observable collection and the 1st try to give a representation of an object

This is the 2nd article about databinding.
The 1st can be found here and the 3rd here.
As the name says, observable collection is a collection that send an event when items are added or removed from it.
This is really useful in automation for manage recipes for examples, but basically you can manage everything: it can be also a collection of machines, a collection of silos, and so on.
I use observable collection a lot for charts and to manage big lists of similar items.

This is an example on how to use an observable collection:
Let's suppose that i have my usual tank, like in the previous example, and i want to add some new liquids to the listbox, and i want also to remove them.
Of course i want to see changes in real time, and i want to write as less code as possible.

So as usual i define my data class:
class Liquid
    {
        public string Name { get; private set; }
        public SolidColorBrush LiquidColor { get; private set; }        
        public Liquid(string name, Color color) 
        {
            this.Name = name;
            this.LiquidColor = new SolidColorBrush(color);            
        } 

And my observable collection of liquids, with 3 samples :
    class LiquidCollection : ObservableCollection
    {
        public LiquidCollection() 
        {  
            this.Add(EmptyCilinder());
            ...
            this.Add(OrangeLiquid());      
        }
        private Liquid EmptyCilinder()
        {  return new Liquid("Empty Cilinder", Colors.Gray);  }
       ...
        private Liquid OrangeLiquid()
        {  return new Liquid("Orange liquid", Colors.Orange); }        
    }

Then i add a custom color collection where i cover all the colors:
class CustomColorCollection : ObservableCollection
    {
        public CustomColorCollection() 
        {
            this.Add(new SolidColorBrush(Colors.Aqua));
            ....
            this.Add(new SolidColorBrush(Colors.Gold));
        }
    }

Then i place 2 listbox, 1 textbox and 2 buttons in the User Interface, in the code behing as usual i set the datacontext:
public MainWindow()
        {
            InitializeComponent();
            lstSelectColor.DataContext = new LiquidCollection();
            lstLiquidColors.DataContext = new CustomColorCollection();
        }

and the 2 buttons callback:
private void btnAddLiquid_Click(object sender, RoutedEventArgs e)
        {
((LiquidCollection)lstSelectColor.DataContext).Add(new Liquid(txtNameNewLiquid.Text,    ((SolidColorBrush)lstLiquidColors.SelectedItem).Color));
}

        private void btnRemoveLiquid_Click(object sender, RoutedEventArgs e)
        {
((LiquidCollection)lstSelectColor.DataContext).Remove((Liquid)lstSelectColor.SelectedItem);
}

And this is the UI (to binding items refere at the post of databinding #1):

Compiling and running i obtain what i want, so i have a list of colors and a list of liquids that i can update, adding or removing.


The only problem is that the list of color sux. In this case we need to use an ItemTemplate to give a representation of an object Color in the listbox.

A good way can be represent it on a rectangle, and this could be done in this way:
If we compile and debug we obtain something better, that it's similar to this:

I think that doing this with winforms it's really hard, but with WPF and a bit of imagination it will take not so much time, and the final users will be happier than to see a listbox with "Green - Dark Green - Light Green - Purple - and so on..."

As usual you can find the full solution here:
http://mesta-automation.com/Downloads/databinding2.rar

No comments: