Question

好吧，我一直试图连续三天解决这个问题，但我仍然没有找到解决办法。

基本上我试图将点击的Ellipse替换为3x3棋盘上唯一的空白点。 9个方块中的8个在运行时被Ellipse元素占用。

我需要找到一个没有被占用的地方，我似乎无法做到。为什么？因为即使在运行时网格上有空位，Javascript也拒绝承认这一点。

我使用了这行：var childrenCount = canvasArray [i] .children.count; ..这就是所有的画布。如果在运行时有一个空位，那么为什么我的代码拒绝看到它呢？或者我没有写出正确的代码？如何在运行时表示和找到空白点？这就是我想知道的。

这是伪代码：

 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;
 }

我想用Javascript（而不是C＃）来做这件事。

我已经有了这个（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);
        }
    }
}

这是我的Silverlight代码：

<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" MouseLeftButtonUp="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>

如果有人知道如何解决这个问题..

谢谢

Answer 1

我不擅长使用Javascript，所以这是你在C＃中的代码:(我认为这很容易理解）

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;
        }
    }
}

我认为这是非常低效的，但我现在没有时间制定最佳解决方案。

Answer 2

问题是你正在检查你所有的画布，看看是否有没有孩子。但是，如果你看看你的XAML，很明显你的所有画布都有孩子。

您需要做的是遍历所有边框，并跟踪每个边框中的哪一行+列组合。在此检查结束时，应该有一行+列组合，其中不包含border - 这是你的空单元格。

在3x3 Silverlight网格上找到一个空白点

2 个答案: