Xamarin.Forms国际象棋应用：可移动位置按钮不显示问题求助

我正在使用C#与Xamarin.Forms开发一款国际象棋应用，目前正实现棋子高亮与移动功能。编写代码后，期望点击棋子时，在所有可移动位置显示可点击的ImageButton（点击该按钮即可完成移动），但实际并未显示。通过断点调试确认代码正常运行，只是按钮无法在棋盘上显示。

核心点击事件代码 #

protected virtual void OnPieceClicked(object sender, EventArgs e)
{
    var pieceButton = (ImageButton)sender;

    //debug
    Console.WriteLine($"_chessboardView is null: {_chessboardView == null}");
    if (_chessboardView != null)
    {
        Console.WriteLine($"_possibleMoveButtons is null: {_chessboardView._possibleMoveButtons == null}");
    }

    Piece clickedPiece = null;
 for (int row = 0; row < 8; row++)
    {
        for (int col = 0; col < 8; col++)
        {
            Piece piece = _chessBoard.Board[row, col];
            if (piece != null && piece.PieceButton == pieceButton)
            {
                clickedPiece = piece;
                _currentRow = row;
                _currentCol = col;
                break;
            }
        }
        if (clickedPiece != null)
        {
            break;
        }
    }
    
    var possibleMoves = GetPossibleMoves(_currentRow, _currentCol, _chessBoard.Board);

    //debug
    Console.WriteLine($"Number of possible moves for clicked piece: {possibleMoves.Count}");

    foreach (var move in possibleMoves)
    {
        var moveButton = new ImageButton
        {
            Source = "possible_move", // TODO: change pic
            BackgroundColor = Color.Red,
            CommandParameter = move
        };
        moveButton.Clicked += OnMoveClicked;

        _chessboardView._possibleMoveButtons.Add(moveButton);
        _chessboardView._moveButtons.Add(moveButton);
        _chessboardView.Children.Add(moveButton, move.col, move.row);

        //debug
        Console.WriteLine($"Added move button at row {move.row}, col {move.col}");
    }
}

UpdateBoard方法代码 #

public void UpdateBoard()
{
    // Remove previous piece images from the board
    foreach (ImageButton pieceButton in _pieceButtons)
    {
        Children.Remove(pieceButton);
    }
    foreach (ImageButton moveButton in _moveButtons)
    {
        Children.Remove(moveButton);
    }
    foreach (ImageButton possibleMoveButton in _possibleMoveButtons)
    {
        Children.Remove(possibleMoveButton);
    }

    _possibleMoveButtons.Clear();
    _moveButtons.Clear();
    _pieceButtons.Clear();

    //debug
    if (_chessBoard == null)
    {
        System.Diagnostics.Debug.WriteLine("ChessBoard is null");
        return;
    }

    if (_chessBoard.Board == null)
    {
        System.Diagnostics.Debug.WriteLine("ChessBoard's Board is null");
        return;
    }

    for (int row = 0; row < 8; row++)
    {
        for (int col = 0; col < 8; col++)
        {
            Piece piece = _chessBoard.Board[col, row];
            if (piece != null)
            {
                ImageButton pieceButton = piece.PieceButton;

                _pieceButtons.Add(pieceButton);
                Children.Add(pieceButton, col, row);
            }
        }
    }
}

补充XAML代码 #

<StackLayout>
    <local:ChessboardView x:Name="szachownica"
              ChessBoard="{Binding CurrentChessBoard}"
              RowSpacing="0" ColumnSpacing="0"
              Margin="20"
              HeightRequest="{Binding Path=Width, Source={x:Reference szachownica}}"
              InputTransparent="False">
        
    </local:ChessboardView>
    <Button Text="Previous move" Command="{Binding UndoMoveCommand}" />
    <Button Text="New Game" Command="{Binding NewGameCommand}" />
    <Button Text="New Game (vs AI)" Command="{Binding NewGameAICommand}" />
    <Button Text="New Game 960" Command="{Binding NewGame960Command}" />
</StackLayout>

ChessboardView构造函数 #

public ChessboardView()
{
    _possibleMoveButtons = new List<ImageButton>();

    for (int i = 0; i < 8; i++)
    {
        RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
        ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
    }

    for (int row = 0; row < 8; row++)
    {
        for (int col = 0; col < 8; col++)
        {
            BoxView square = new BoxView
            {
                BackgroundColor = (row + col) % 2 == 0 ? Color.White : Color.Gray
            };

            Children.Add(square, col, row);
        }
    }
}

ChessBoard构造函数 #

public ChessBoard()
{
    Board = new Piece[8, 8];
    InitializeBoard();
    
    for (int x = 0; x < 8; x++)
    {
        for (int y = 0; y < 8; y++)
        
        {
            Piece piece = Board[x, y];
            if (piece != null)
            {
                piece.SetChessBoardAndChessboardView(this, _chessboardView);
            }
        }
    }
}

问题排查方向 #

1. 控件层级遮挡：ChessboardView构造时先添加了所有BoxView作为棋盘格子，后续添加的moveButton默认ZIndex为0，会被BoxView覆盖。给moveButton设置ZIndex = 1，确保按钮显示在棋盘格子上方：

var moveButton = new ImageButton
{
    // 其他属性
    ZIndex = 1
};

2. UpdateBoard误调用：检查OnPieceClicked执行后是否触发了UpdateBoard方法，该方法会移除所有moveButton并清空列表，导致刚添加的按钮被删除。如果有触发，需要调整逻辑，避免在显示移动按钮时调用UpdateBoard。

3. 行列参数颠倒：Grid的Children.Add方法参数顺序是column, row，确认move.col和move.row是否对应正确。比如如果Board[row, col]和Grid的行列定义顺序不一致，会导致按钮添加到错误位置。

4. 按钮尺寸与资源问题：

   • 确认possible_move图片资源是否存在，若不存在，ImageButton会因无内容而尺寸为0。可以先移除Source属性，只保留BackgroundColor测试按钮是否显示。
   • 给ImageButton添加布局属性，确保它占满整个格子：

   var moveButton = new ImageButton
   {
       // 其他属性
       HorizontalOptions = LayoutOptions.Fill,
       VerticalOptions = LayoutOptions.Fill,
       HeightRequest = double.NaN,
       WidthRequest = double.NaN
   };
   

5. 数据绑定与视图同步：检查ChessBoard的绑定是否正确，确保_chessboardView引用的是正确的实例，避免按钮添加到了未渲染的视图上。

内容的提问来源于stack exchange，提问作者pakaccio