We could opt to make use of the Grid of Ellipses to store the state of each cell and we could process this directly but there are advantages to separating the computational part from the display.

We could just opt to set up a array of boolean or integer types and work directly with it.  However we can use data binding to update the Grid of Ellipses and save having to explicitly write an update routine for the display.

Is this a good approach?

It seems to be efficient enough and it's simple - so yes it is a reasonable approach and it provides a very simple example of how data binding can be useful in situations that you might not have thought of using it.

We can bind a dependency property such as color or opacity on the Ellipse object to a standard or a dependency property. However you can't bind directly to a value type so an array of boolean or integer doesn't allow us to use binding.

To use binding we need an array of objects and so we need to define a new class that represents a cell.

public class Cell
{
 private bool _state;
 public bool state
 {
  get
  {
   return _state;
  }
  set
  {
   _state = value;
  }
 }
}

This simply stores the state of a cell in a boolean property represented internally by _state.

Notice that the class has to be public. Silverlight differs from WPF in that you can only bind a dependency property to public properties on a public class. If you do try to bind to a property on a private class then all that happens is - nothing. You don't get an error message or a runtime exception but you don't get any binding either.

So if you can't make Silverlight binding work and you aren't seeing any error messages then check that what you are trying to bind to is public.

Now we can set up a grid of cells:

Cell[,] cells=new Cell[GridSize,GridSize];

which we can initialize within the same loop that sets up the Grid:

cells[i, j]=new Cell{state = false};

Notice that the array that we created is just an array of references to Cell objects. To populate the array we actually have to create a new Cell instance for each element.

Now we can set up the data binding between the Ellipses in the Grid and the Cell objects in the array:

el.DataContext = cells[i, j];
el.SetBinding(OpacityProperty,
                  new Binding( "state"));

The data binding is to the Ellipses OpacityProperty which is a number between 0 and 1.0. Notice that the Silverlight SetBinding method doesn't accept a simple string to specify the property path as in the case of WPF. Instead you have to create a binding object complete with the property path.

The binding system already knows how to convert the boolean state property to bind it to Opacity - true = 1.0 false =0.0. Once again the defaults of the system mean we don't have to do any extra work.

We also need to add:

using System.Windows.Data;

The complete constructor is;

public MainPage()
{
 InitializeComponent();
 for (int i = 0; i < GridSize; i++)
 {
  grid1.ColumnDefinitions.Add(
              new ColumnDefinition());
  grid1.RowDefinitions.Add(
              new RowDefinition());
 }
 for (int i = 0; i < GridSize; i++)
 {
  for (int j = 0; j < GridSize; j++) 
  {
    Ellipse el = new Ellipse();
    cells[i, j]=new Cell {state = false};
    Grid.SetColumn(el, j);
    Grid.SetRow(el, i);
    el.Fill = new SolidColorBrush(
                            Colors.Red);
    el.DataContext = cells[i, j];
    el.SetBinding(OpacityProperty,
                 new Binding( "state"));
    grid1.Children.Add(el);
  }
 }
}

Now if you run the program you will see a completely blank grid because the data binding has set every Ellipse's Opacity property to 0.0.

<ASIN:1430230606 >

<ASIN:1430225491 >

<ASIN:0672330628 >

<ASIN:1430219505 >

<ASIN:1430229888 >