Find an empty spot on a 3x3 Silverlight Grid

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.

Here is the pseudocode:

 if (squareOnGrid is empty) {
     log.write(squareOnGrid + ' is empty');
     emptySquare = squareOnGrid;

     oldPositionBorder = sender;
     oldPositionR = checkerPiece.row;
     oldPositionC = checkerPiece.col;

     checkerPiece.row = empty.row;
     checkerPiece.column = squareOnGrid.column;

     oldPositionBorder = null;
 }

I want to do this with Javascript (not C#).

I already have this (Javascript):

function switchPlaces(sender) {

    for (var i = 0; i < canvasArray.length; i++) {
        var oldLocationBorderParent = sender;
        var oldLocationCanvasParent = oldLocationBorderParent.findName('canvas' + (i + 1));
        var oldLocationChild = oldLocationCanvasParent.findName('ellipse' + (i + 1));

        var childrenCount = canvasArray[i].children.count;
        log.info(childrenCount); //all of this outputs '1'. It should have a '0' in there, but no.

        if (childrenCount == 0) {
            log.info(canvasArray[i] + ' has no children');
            var emptySpot = canvasArray[i];
            sender['Grid.Row'] = emptySpot['Grid.Row'];
            sender['Grid.Column'] = emptySpot['Grid.Column'];
            oldLocationCanvasParent.children.remove(oldLocationChild);
        }
    }
}

Here is my Silverlight code:

<Grid
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Loaded="onLoaded" ShowGridLines="True" Background="CornflowerBlue">

 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="100"/>
     <ColumnDefinition Width="100"/>
     <ColumnDefinition Width="100"/>
     <ColumnDefinition/>
 </Grid.ColumnDefinitions>

 <Grid.RowDefinitions>
     <RowDefinition Height="100"/>
     <RowDefinition Height="100"/>
     <RowDefinition Height="100"/>
 </Grid.RowDefinitions>

 <Border Grid.Row="0" Grid.Column="0" x:Name="b1" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas1">
         <Ellipse Width="100" Height="100" x:Name="ellipse1" Fill="Red" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="0" Grid.Row="1" x:Name="b2" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas2">
         <Ellipse Width="100" Height="100" x:Name="ellipse2" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="0" Grid.Row="2" x:Name="b3" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas3">
         <Ellipse Width="100" Height="100" x:Name="ellipse3" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="1" Grid.Row="1" x:Name="b4" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas4">
         <Ellipse Width="100" Height="100" x:Name="ellipse4" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="1" Grid.Row="2" x:Name="b5" Mous开发者_如何转开发eLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas5">
         <Ellipse Width="100" Height="100" x:Name="ellipse5" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="2" Grid.Row="0" x:Name="b6" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas6">
         <Ellipse Width="100" Height="100" x:Name="ellipse6" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="2" Grid.Row="1" x:Name="b7" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas7">
         <Ellipse Width="100" Height="100" x:Name="ellipse7" Visibility="Visible"/>
     </Canvas>
 </Border>

 <Border Grid.Column="2" Grid.Row="2" x:Name="b8" MouseLeftButtonUp="switchPlaces" >
     <Canvas x:Name="canvas8">
         <Ellipse Width="100" Height="100" x:Name="ellipse8" Visibility="Visible"/>
     </Canvas>
 </Border>

 </Grid>

If anyone has any idea how to fix this..

Thank you

I'm no good at Javascript, so here's your code in C#: (I think it's pretty understandable)

for(int rowIndex = 0; rowIndex < Grid.RowDefinitions.Count; rowIndex++)
{
    for(int columnIndex = 0; columnIndex < Grid.ColumnDefinitions.Count; columnIndex++)
    {
        bool cellIsEmpty = true;

        foreach(FrameworkElement fe in Grid.Children)
        {
            if((int)fe.GetValue(Grid.Row) == rowIndex
               && (int)fe.GetValue(Grid.Column) == columnIndex)
            {
                cellIsEmpty = false;
                break;
            }
        }

        if(cellIsEmpty == true)
        {
            // You've Found Your Empty Cell!
            break;
        }
    }
}

I recognise it's extremely inefficient, but I don't have the time to work out the optimal solution at the moment.

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.