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. This is the way that things would have been done pre-WPF. 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.

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.

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, "state");

The data binding is to the Ellipses OpacityProperty which is a number between 0 and 1.0. 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 WPF system mean we don't have to do any extra work.

The complete Window_Loaded event handler is;

private void Window_Loaded(
       object sender, RoutedEventArgs e)
{
 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++)
  {
   cells[i, j] = new Cell 
                       { state = false };
   Ellipse el = new Ellipse();
   Grid.SetColumn(el, j);
   Grid.SetRow(el, i);
   el.Fill = Brushes.Red;
   el.DataContext = cells[i, j];
   el.SetBinding(OpacityProperty,"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.

Now we can move on to consider how to let the user set some of the cells to a live state. The simplest thing to do is to allow them to click on a cell and change its state. To do this we need to add a MouseDown event handler to the Grid. Move back to the Designer and select the inner grid. Move to the Properties Window and select the Event tab. Now scroll down to the MouseDown event and double click on it. A MouseDown event handler will be created for you and you will be transferred to the editor to start working on it. Its default name is grid1_MouseDown.

<ASIN:143022455X>

<ASIN:0596800959>

<ASIN:143022519X>

<ASIN:1430225394>

<ASIN:1430272910>