Well, I have been trying to figure this one out for three days straight and I still haven't come up with a fix.

Basically I am trying to swap out the clicked Ellipse with the only empty spot on a 3x3 checkerboard. 8 of the 9 squares are occupied by Ellipse elements at runtime.

I need to find the one spot that is not occupied and I can't seem to do it. Why? Because even though there is an empty spot on the grid at runtime, Javascript refuses to acknowledge this.

I used the line: var childrenCount = canvasArray[i].children.count; .. so that's all the canvases. If at runtime there is an empty spot, then how come my code refuses to see it? Or am I not writing the right code? How is the empty spot represented and found at runtime? That's what I want to know.

Apparently one can not access Grid's elements by JavaScript. Apparently this would allow JavaScript hacking. I am not sure about this, but someone told me. So now I am kind of stuck with this. I will ask around some more and wait if anyone can answer here. Cheers.
–
MrSilverlightJul 19 '11 at 20:32

The problem is you are checking all your Canvases to see if there are any with no children. However, if you look at your XAML, it is clear that all your canvases always have children.

What you need to do is go through all the Borders, and keep track of which row+column combination each one is in. At then end of this check, there should be one row+column combination which doesn't contain a border - that's your empty cell.